sharing div space with tabstrip

8 posts, 0 answers
  1. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2015

    Posted 17 Mar 2016 Link to this post

    I have a vertical splitter with 3 panels. The bottom panel is as wide as the window. I have a tabstrip with 3 tabs that don't fill it. There is a big white space on one side. I can change which side. But, I cannot figure out how to put information in that space. Like, maybe instructions. Or something.

    I have searched this forum without success.

    Maybe somebody knows how to do it.

    Thanks,

    Rick

  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 21 Mar 2016 Link to this post

    Hi Rick,

    The provided information is not enough to determine what causes the issue. Could you please provide a dojo which demonstrates your exact setup - this way I would be able to provide concrete recommendations? 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2015

    Posted 21 Mar 2016 in reply to Iliana Nikolova Link to this post

    Iliana,

    Thanks for helping.

    Please run the attached snippet. Then click on a tab. The [blue] area to the right is where I would like to put some readonly text.

    In case the zip file does not open, I have included the snippet below.

    Rick

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Sharing div space with tabstrip</title>
     
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
       
    <div id="splitter">
      <div>Pane A</div>
      <div style="background-color:lightblue;">
       
    <div id="tabstrip" style="width:50%;height:100%;">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div>Content 1<br><br><br><br></div>
        <div>Content 2<br><br><br><br></div>
    </div>
     
    </div>
    </div>     
         
    <script>
       
      $("#splitter").kendoSplitter({ orientation: "vertical",
      panes: [ {}, { } ]
      });
       
        $("#tabstrip").kendoTabStrip({
            animation: {
                // fade-out current tab over 1000 milliseconds
                close: {
                    duration: 1000,
                    effects: "fadeOut"
                },
               // fade-in new tab over 500 milliseconds
               open: {
                   duration: 500,
                   effects: "fadeIn"
               }
           }
        });
    </script>
    </body>
    </html>

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Mar 2016 Link to this post

    Hi Rick,

    In order to achieve this you should use custom CSS. Take a look at the updated dojo which demonstrates a possible implementation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2015

    Posted 15 Apr 2016 in reply to Iliana Nikolova Link to this post

    Iliana,

    I think you are headed in the right direction.

    I need the text on the right. But, I need it to be as far up as the top of the tabs.

    And, I need the text to extend as far down as the bottom of the tabs.

    Your solution is almost there: http://dojo.telerik.com/@RickBollinger/UDiFIW

    Thanks,

    Rick

  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Apr 2016 Link to this post

    Hi Rick,

    This outcome can be achieved by setting vertical-align: top to the .k-tabstrip-wrapper and .readOnlyText elements (updated dojo). 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2015

    Posted 20 Apr 2016 in reply to Rick Link to this post

    Dojo worked but could not get implementation to work. I have a big app. The css screwed up all my tabstrips.

    I tried deleting the comma separator. But, ran out of time to diagnose.

    Rick
  14.
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Apr 2016 Link to this post

    Hi Rick,

    The CSS rule which I suggested will affect all TabStrips in your application. In order to target a specific TabStrip only you could set some class to it and use this class in the CSS selector. Take a look at the updated dojo.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top