#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Posts
    5
    Rep Power
    0

    Trouble keeping the rows and columns line up frowning


    I am having trouble keeping the rows and columns line up
    When is desktop mode maximum columns should be three
    When I click on “Cell Three” works fine but when I click on ”Cell Two” it does loose the three column order :frowning:
    When Tablet maximum columns is should be two all the time
    When I click on "Cell Two" works fine but when I click on "Cell Three" it does loose the two column order :frowning:
    When Mobile maximum is one column
    It does work fine :smile:
    I paste the whole code in one file hoping it will be easier to follow, my apologies if is hard to read
    Let me know if I am clear with my explanation plz, in advance thank you for your help!

    Code:
    <!DOCTYPE html>
        <!-- include bootstrap -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
    /* centered columns styles */
    .row-centered {
        text-align:center;
    }
    .col-centered {
        display:inline-block;
        float:none;
        /* reset the text-align */
        text-align:left;
        /* inline-block space fix */
        margin-right:-4px;
        vertical-align: top;
    }
    .col-fixed {
        /* custom width */
        width:320px;
    }
    .col-min {
        /* custom min width */
        min-width:320px;
    }
    .col-max {
        /* custom max width */
        max-width:320px;
    }
    .item {
        width:100%;
        height:100%;
    	border:1px solid #cecece;
        padding:16px 8px;
    	background:#ededed;
    	background:-webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
    	background:-moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    	background:-ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    }
    /* content styles */
    .item {
    	display:table;
    }
    .content {
    	display:table-cell;
    	vertical-align:middle;
    	text-align:center;
    }
    .content:before {
        font-family:sans-serif;
        font-size:12px;
        letter-spacing:1px;
        color:#747474;
    }
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top: none;
    }
    </style>
    <div class="container">
        <div class="row row-centered">
    <!-- Cell One -->
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell One</div></div></div>
    <!-- Cell Two -->        
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageMngt')">Cell Two</a></div></div></div>        
             <div id="ImageMngt" class="tabcontent">       
                    <b>Content Cell Two</b><br />
                    Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two
            </div>
    <!-- Cell Three -->              
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageOff')">Cell Three</a></div></div></div>
                <div id="ImageOff" class="tabcontent"><b>Content Three</b><br />
                    Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three
                </div>
    <!-- Cell Four-->  
            <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Four</div></div></div>
    <!-- Cell Five-->
             <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Five</div></div></div>
    <!-- Cell Six -->        
             <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Six</div></div></div>
    </div>
    </div>
    <script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Gujarat, India
    Posts
    14
    Rep Power
    0
    Do you want to keep the tab content in full width or just in the column width?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Posts
    5
    Rep Power
    0
    Originally Posted by aslamdoctor
    Do you want to keep the tab content in full width or just in the column width?
    Hi Aslamdoctor, sorry for the late reply, is working now in firefox and chrome and feel free to see at work:

    tabs and flex

    my next challenge is to make it work in IE at least the latest version. Do you have any idea in how to do this?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Posts
    5
    Rep Power
    0
    Originally Posted by mp5163093
    Hi Aslamdoctor, sorry for the late reply, is working now in firefox and chrome and feel free to see at work:

    tabs and flex

    my next challenge is to make it work in IE at least the latest version. Do you have any idea in how to do this?
    works now at codepen site:

    tabs and flex - v5

IMN logo majestic logo threadwatch logo seochat tools logo