Convert div structure into single line for list viewRSS

3 replies

Last post Jul 04, 2019 09:40 AM by Jenifer Jiang

‹ Previous Thread|Next Thread ›

Shortcuts

Harry US11

Member

219 Points

201 Posts

Convert div structure into single line for list view

Jul 01, 2019 05:44 PM|Harry US11|LINK

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.

I have to switch between grid and list view on clicking of a button on client side using jquery, that is why I am looking for css solution, so that i can add/remove css classes using jquery to achieve required result.

.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>

- Reply
Jenifer Jian...
Contributor

2100 Points

705 Posts
Re: Convert div structure into single line for list view

Jul 03, 2019 08:45 AM|Jenifer Jiang|LINK
Hi Harry US11,

According to your description, I'm sorry that I'm not so clear about your requirement.

The class you provided is not included in your sample code like grid-column class.

Harry US11
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.

Could you provide the related code so that it will be easier to know about your issue?

For my understanding, do you mean that you want to change the layout horizontally to vertically?

If you want to place the div vertically, I suggest that you could use boortstrap list-group.
```
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
    </div>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
    </div>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
    </div>
  </a>
</div>
```
For more, you could refer to : https://getbootstrap.com/docs/4.0/components/list-group/#custom-content

Best Regards,

Jenifer
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
Harry US11
Member

219 Points

201 Posts

Re: Convert div structure into single line for list view

Jul 03, 2019 04:02 PM|Harry US11|LINK

Hi Jennifer,

The screenshots that i have provided here : https://stackoverflow.com/questions/56813267/convert-div-structure-into-single-line-for-list-view

may help you better understand the problem.
- Reply
Jenifer Jian...
Contributor

2100 Points

705 Posts
Re: Convert div structure into single line for list view

Jul 04, 2019 09:40 AM|Jenifer Jiang|LINK
Hi Harry US11,

According to the image, I seem to understand your requirment.

I've made a test and find that maybe the grid-column class is not so good.

I suggest that you could just use jquery to remove the class grid-row and add the bootstrap's class list-group.

And remove grid-item, then add grid-column-item, the layout will be shown as list view.
```
       $(function () {
            $("#test").click(function () {
                $(this).siblings().removeClass('grid-row').end().toggleClass('list-group');
            })
        })

    <input id="test" type="button" value="testbtn" />
```
Best Regards,

Jenifer
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›

Convert div structure into single line for list viewRSS

3 replies

Shortcuts

Convert div structure into single line for list view

Re: Convert div structure into single line for list view

Harry US11

Re: Convert div structure into single line for list view

Re: Convert div structure into single line for list view