Reputation: 75

Convert div structure into single line for list view

I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.

I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.

On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.

Current Layout:

Required Layout:

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  height: 400px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 230px;
  position: relative;
  padding: 7px;
  box-sizing: border-box;
}

.grid-column {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.grid-column-item {
  height: 200px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 920px;
  position: relative;
  padding: 7px;
  border-bottom: 1px solid #ccc;
}

.grid-column-item:first-child {
  margin-top: 7px;
  border-top: 1px solid #ccc;
}

<div class="grid-row">
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Answers (1)

Dhaval Jardosh

Reputation: 7299

From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.

Also, check the In Stock div, it will toggle between list_view and grid_view.

There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  /*   height: 400px; */
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 230px;
  position: relative;
  padding: 7px;
  box-sizing: border-box;
  border: 2px solid red;
}

.grid-column {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.grid-column-item {
  height: 200px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 920px;
  position: relative;
  padding: 7px;
  border-bottom: 1px solid #ccc;
}

.grid-column-item:first-child {
  margin-top: 7px;
  border-top: 1px solid #ccc;
}

.outer_block {
  display: flex;
  flex-direction: column;
}

.list_view {
  display: none;
}

@media only screen and (max-width: 800px) {
  .grid-row {
    flex-direction: column;
  }
  .grid-item {
    min-width: 100%;
  }
  .outer_block {
    flex-direction: row;
  }
  .img-thumbnail {
    width: 100px;
  }
  .second_block {
    flex: 1;
  }
  .grid_view {
    display: none;
  }
}

<div class="grid-row">
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <div class="outer_block">
        <div class="first_block">
          <!--       Image -->
          <a href="#" data-name="sponsored_search_result_link">
            <div class="product_search_img">
              <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
            </div>
          </a>
        </div>

        <div class="second_block">
          <!--       Accessories Text -->
          <div class="font-10 text-align-left status-flag">
            <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
              title="This product has accessories">Accessories</a
          >
          <a
            tabindex="1"
            role="button"
            data-placement="bottom"
            data-trigger="focus"
            class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
            data-toggle="popover"
            data-content="body"
            id="statusflag2"
            data-original-title=""
            title=""
          ></a>
          </div>

          <!--       Link to Prod Description -->
          <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
            <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
              i5-6300U Dual-core (2 Core)
            </div>
          </a>

          <!--       VPN AND SKU -->
          <div class="font-12 text-align-left margin-top-md">
            <div class="show">
              <span class="color-font-dark-gray bold">VPN: </span
            ><span class="color-font-dark-gray">F47UT</span>
            </div>
            <div class="show">
              <span class="color-font-dark-gray bold">SKU: </span
            ><span class="color-font-dark-gray">440Z</span>
            </div>
          </div>

          <!--       In Stock when in List View-->
          <div id="login-mode-cntl" class="list_view">
            <div class="color-font-green margin-bottom-sm">In Stock</div>
          </div>
        </div>


        <div class="third_block">
          <!--       Adding Button -->
          <div class="row">
            <!--       Price -->
            <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
              $1,345.46
            </div>
            <!--       In Stock when in Grid View-->
            <div class="row" id="login-mode-cntl" class="grid_view">
              <div class="color-font-green margin-bottom-sm">In Stock</div>
            </div>

            <div class="col-xs-3 col-sm-3 padding-vsm">
              <input class="form-control text-center AddInput-default" title="Please enter the value" />
            </div>

            <div class="col-xs-9 col-sm-9 padding-vsm">
              <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
            <i class="fas fa-shopping-cart"></i>
            Add
          </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Convert div structure into single line for list view

Answers (1)

Related Questions