Has anyone ever been able to get the Kendo tabstrip to scroll when there is a tab overflow?
I can currently get the tab control to present a scroll bar at the bottom, but this is not the desired behavior because it moves the content as well.
We just want to be able scroll between tabs when they overflow.
Has anyone accomplished this? If so, how did you do it?
Found the answer here: http://jsfiddle.net/dimodi/6Z62d/
HTML:
<p>Tabs become scrollable</p>
<div id="tabStrip1">
<ul>
<li class="k-state-active">tab item 1</li>
<li>tab item 2</li>
<li>tab item 3</li>
<li>tab item 4</li>
<li>tab item 5</li>
<li>tab item 2</li>
<li>tab item 3</li>
<li>tab item 4</li>
<li>tab item 5</li>
</ul>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
<div>content 5</div>
</div>
CSS:
#tabStrip1 > .k-tabstrip-items
{
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
This worked for me.
Check out the documentation on scroll-able tabs:
Kendo UI Scrollable Tabs
Related
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
How can I get child element of a dropdown using nightwatch js. here is my code
<ul id="ddEmp" class="ng-scope">
<li class="ng-scope active">Emp 1</li>
<li class="ng-scope">Emp 2</li>
<li class="ng-scope">Emp 3</li>
</ul>
I want to get "Emp 3".
you can use the nth-child() css selector. In your case it would be ul#ddEmp li:nth-child(3)
You can also use xpath and look for the text in the li:
.useXpath().click('//li[text()="Emp 3"]')
I have a Materialize card with a dropdown menu in the top right corner. However, when clicking the dropdown button, the menu shows but the menu content doesn't go beyond the border of the card:
<ul id='myDropdown-menu' class='dropdown-content'>
<li>Option 1</li>
<li>Option 2</li>
</ul>
<div class="card white">
<div class="card-content grey-text text-darken-4">
<span class="card-title grey-text text-darken-4">Card Title</span>
<a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
</div>
</div>
How can I make the dropdown menu go beyond the borders of a card?
http://jsfiddle.net/6sjLbrht/
There seems to be an overflow: hidden on the .card class which is preventing the menu from appearing outside the borders of the card. By adding the following style in your own stylesheet you can overcome this is
.card {
overflow: visible !important;
}
I've updated the JSFiddle to illustrate the fix:
http://jsfiddle.net/6sjLbrht/1/
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
I am fairly new to using Zurb so I was wondering if someone could shed some light for me.
http://www.bitandpiecesvape.co.uk/
This is my website currently (not running Zurb). I am trying to remake this in Zurb but I am having trouble creating two top bars.
As you can see in the link I have the 5 links in the dark blue bar under the banner, and then the categories in the lighter blue area below it. How can I make it so that these will display as they do in the link, but on resizing the browser to small they should all compile into a dropdown menu.
I have tried with the code below, and it does work... But the second menu just floats a little below it. I have tried seperating the two menus using a div row class but it stops the whole thing working... Obviously I need it to be on two rows so I can position the second menu properly below it.
I apologise that I can't upload a current version of my Zurb template, but I am running all this offline on my laptop at the moment because I am having trouble with my FTP.
Any thoughts???
Thank you.
<div style="width: 100%; height: 100px; background: #0d233c">
<div class="row">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>
<span class="show-for-small-only"><B>Bitandpieces Vape</B></span>
</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
</div>
</div>
Create the two top bars with separate instances of topbar rather than adding sections should solve the issue with the navs stacking properly if that is ultimately what you choose to use for this.
<nav class="top-bar" data-topbar role="navigation">
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
<nav class="top-bar" data-topbar role="navigation">
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
I would also suggest sticking with the foundation grid system and separating out the top banner section completely in it's own row and avoiding those height:100 styles. The site will be responsive and behave well as long as you use all of he built in classes for Foundation.