How to make the result card/list responsive?

Question

I am trying to make a filter based search using reactive search. However, I am stuck with the result card implementation. Currently, the result card only displays specific content from my elastic search database. However, I need the result card to be responsive in the sense that when a result card is clicked, a popup should be rendered on the screen displaying the additional details of the particular search result.

I have tried implementing a few CSS and Javascript popups, but am unable to render the contents of each search item.

        <ResultCard
            componentId="results"
            dataField="original_title"
            react={{
              and: [
                "mainSearch",
                "RangeSlider",
                "Brand-list",
                "Segment-list",
                "fuel-list"
              ]
            }}
            pagination={true}
            className="Result_card"
            paginationAt="bottom"
            pages={5}
            size={12}
            Loader="Loading..."
            noResults="No results were found..."
            sortOptions={[
              {
                dataField: "Price__in_Lakhs_",
                sortBy: "asc",
                label: "Sort by Price (Low to High) \u00A0"
              },
              {
                dataField: "Price__in_Lakhs_",
                sortBy: "desc",
                label: "Sort by Price (High to Low) \u00A0 \u00A0"
              },
              {
                dataField: "Variants.keyword",
                sortBy: "asc",
                label: "Sort by Variant (A-Z) \u00A0"
              }
            ]}
            innerClass={{
              title: "result-title",
              listItem: "result-item",
              list: "list-container",
              sortOptions: "sort-options",
              resultStats: "result-stats",
              resultsInfo: "result-list-info"
            }}
            onData={function(res) {
              return {
                description: (
                  <div className="main-description">
                    <div className="ih-item square effect6 top_to_bottom">
                      <a target="#" href={"" + res.Index}>
                        <div className="img">
                          <img
                            src={"" + res.Index}
                            alt={""}
                            className="result-image"
                          />
                        </div>
                        <div className="info colored">
                          <h3 className="overlay-title">

{res.Variants}

                          <div className="overlay-description">
                            {res.Model}
                          </div>

                          <div className="overlay-info">
                            <div className="rating-time-score-container">
                              <div className="sub-title Rating-data">
                                <b>
                                  Price:
                                  <span className="details">
                                    {" "}
                                    {res.Price__in_Lakhs_}
                                    {" Lakhs"}
                                  </span>
                                </b>
                              </div>

                              <div className="sub-title Score-data">
                                <b>
                                  Segment:
                                  <span className="details">
                                    {" "}
                                    {res.Segment}
                                  </span>
                                </b>
                              </div>
                            </div>
                            <div className="revenue-lang-container">
                              <div className="revenue-data">
                                <b>
                                  <span>Brand: </span>{" "}
                                  <span className="details">
                                    {" "}
                                    {res.Brand}
                                  </span>{" "}
                                </b>
                              </div>

                              <div className="sub-title language-data">
                                <b>
                                  Mileage:
                                  <span className="details">
                                    {" "}
                                    {res.Mileage__ARAI_} Kmpl
                                  </span>
                                </b>
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                ),
              };
            }}
          />

Answer 1

Maybe this thread might help you: https://stackoverflow.com/a/56685332/9119053 . If this not what you are looking for can you, please give a proper context and also there seems to be some styling issue with the code as well.