locked
Convert div structure into single line for list view RRS feed

  • Question

  • User1284890338 posted

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

    Monday, July 1, 2019 5:44 PM

All replies

  • User839733648 posted

    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.

    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

    Wednesday, July 3, 2019 8:45 AM
  • User1284890338 posted

    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.

    Wednesday, July 3, 2019 4:02 PM
  • User839733648 posted

    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

    Thursday, July 4, 2019 9:40 AM