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
7 Answers, 1 is accepted
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
Rank 2
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> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.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>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
Rank 2
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
This outcome can be achieved by setting vertical-align: top to the .k-tabstrip-wrapper and .readOnlyText elements (updated dojo).
Regards,
Iliana Nikolova
Telerik
Rank 2
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.
RickThe 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