locked
Tab Screen Size broswer RRS feed

  • Question

  • User-2132497554 posted

    Hi folks,

    http://embed.plnkr.co/UNXQWRTJqsZga2nl2OHu/




    we have 4 tabs and 3 labels at right side in col-md-8.
    The last tab goes downward if small screen size browser as responsive.

    Is it possible to fix it? (it could be reduce size or ellipse if small screen)?

    I am waiting for your response.
    Thanks in Advance!

    Tuesday, October 18, 2016 8:57 AM

Answers

  • User2009744128 posted

    Hi IamGuy84,

    Use the following, I added two break lines after you set the labels, seems to have sorted the problem.

     <div class="col-md-8">
            <div class="pull-right">
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 1 </label>
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 2</label>
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 3</label>
            </div>
            <br/><br/>
            <ul class="nav nav-tabs">
              <li class="active">
                <a data-toggle="tab" href="#home">Home</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu1">Menu 1</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu2">Menu 2</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu3">This is so so long long text whoa!!!</a>
              </li>
            </ul>

    Hope this helps

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 11:01 AM
  • User-835544317 posted

    Hi,

    there are 2 things missing in your html

    1. in your html I see col class for only medium screen , for your html to work for small screens you need to add the col class for small screens as well in your div. see below

    <div class="col-md-5 col-sm-5 col-xs-5">

    2. you are missing the  nav-justified in you nav ul see below

    <ul class="nav nav-tabs nav-justified">

    Also I would recommend you divide you row in three columns - one for the text, second for the menu and third for the labels. The last tab is now not going downward.. the whole menu will down if you go extra small screen - that's the nav-tabs are to work for extra small screen( bootstrap functionality for nav-tabs).

    The last tab is looking slightly odd ( not sure if you need so big text for the last tab) - is this your requirement..

    I have updated the html and its working as expected. See below the updated html

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-4">
                <div class="ellipsed">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-5">
                       <ul class="nav nav-tabs nav-justified">
                           <li class="active">
                               <a data-toggle="tab" href="#home">Home</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu1">Menu 1</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu2">Menu 2</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu3">Too long text..................</a>
                           </li>
                           <li>
    
                           </li>
                       </ul>
                       <div class="tab-content">
                           <div id="home" class="tab-pane fade in active">
                               <h3>HOME</h3>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                           </div>
                           <div id="menu1" class="tab-pane fade">
                               <h3>Menu 1</h3>
                               <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           </div>
                           <div id="menu2" class="tab-pane fade">
                               <h3>Menu 2</h3>
                               <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                           </div>
                           <div id="menu3" class="tab-pane fade">
                               <h3>Menu 3</h3>
                               <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                           </div>
                       </div>   
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3 pull-right">
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 1 </label>
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 2</label>
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 3</label>
            </div>
    
       
    
        </div>
    
    </body>
    </html>
    

    Also find below the working html screen shot

    http://imgur.com/lKaivoq

    Hope this help..

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 3:17 PM

All replies

  • User2009744128 posted

    Hi IamGuy84,

    Use the following, I added two break lines after you set the labels, seems to have sorted the problem.

     <div class="col-md-8">
            <div class="pull-right">
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 1 </label>
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 2</label>
              <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 3</label>
            </div>
            <br/><br/>
            <ul class="nav nav-tabs">
              <li class="active">
                <a data-toggle="tab" href="#home">Home</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu1">Menu 1</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu2">Menu 2</a>
              </li>
              <li>
                <a data-toggle="tab" href="#menu3">This is so so long long text whoa!!!</a>
              </li>
            </ul>

    Hope this helps

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 11:01 AM
  • User-835544317 posted

    Hi,

    there are 2 things missing in your html

    1. in your html I see col class for only medium screen , for your html to work for small screens you need to add the col class for small screens as well in your div. see below

    <div class="col-md-5 col-sm-5 col-xs-5">

    2. you are missing the  nav-justified in you nav ul see below

    <ul class="nav nav-tabs nav-justified">

    Also I would recommend you divide you row in three columns - one for the text, second for the menu and third for the labels. The last tab is now not going downward.. the whole menu will down if you go extra small screen - that's the nav-tabs are to work for extra small screen( bootstrap functionality for nav-tabs).

    The last tab is looking slightly odd ( not sure if you need so big text for the last tab) - is this your requirement..

    I have updated the html and its working as expected. See below the updated html

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-4">
                <div class="ellipsed">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-5">
                       <ul class="nav nav-tabs nav-justified">
                           <li class="active">
                               <a data-toggle="tab" href="#home">Home</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu1">Menu 1</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu2">Menu 2</a>
                           </li>
                           <li>
                               <a data-toggle="tab" href="#menu3">Too long text..................</a>
                           </li>
                           <li>
    
                           </li>
                       </ul>
                       <div class="tab-content">
                           <div id="home" class="tab-pane fade in active">
                               <h3>HOME</h3>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                           </div>
                           <div id="menu1" class="tab-pane fade">
                               <h3>Menu 1</h3>
                               <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           </div>
                           <div id="menu2" class="tab-pane fade">
                               <h3>Menu 2</h3>
                               <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                           </div>
                           <div id="menu3" class="tab-pane fade">
                               <h3>Menu 3</h3>
                               <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                           </div>
                       </div>   
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3 pull-right">
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 1 </label>
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 2</label>
                <label style="margin: 10px 5px 0 0;" class="control-label pull-right">This is Label 3</label>
            </div>
    
       
    
        </div>
    
    </body>
    </html>
    

    Also find below the working html screen shot

    http://imgur.com/lKaivoq

    Hope this help..

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 3:17 PM