The following snippet of kendo ui mobile creates a list with a detail disclosure indicator (a ">" icon on the right of the list cell) on the first list item, when rendering the HTML for iOS devices:
<ul data-role="listview" data-click="tap_Item">
<li id="menuItem1"><a>Item one</a></li>
<li id="menuItem2">Item two</li>
<li id="menuItem3">Item three</li>
</ul>
Putting the "Item one" within an anchor tag gives that cell a detail disclosure indicator.
When using a custom template to generate the list:
<script type="text/x-kendo-template" id="custom_list">
<h3 class="item-title">${startDate}</h3>
</script>
how does one give the cells a detail disclosure indicator?
The easiest thing to do would be to add the css class km-listview-link to the contents of the list items:
<li id="menuItem2"><span class="km-listview-link">Item two</span></li>
Alternatively, this is the CSS that Kendo is using to put that arrow there. You could change the selector to something else.
.km-listview-link:after {
color: #7B7B7B;
border-color: #777;
content: "\a0";
display: block;
position: absolute;
right: 1rem;
top: 50%;
margin-top: -0.32rem;
margin-left: -0.2rem;
border-style: solid;
border-width: .24rem .24rem 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: .5rem;
height: .5rem;
display: inline-block;
vertical-align: middle;
}
I would put an anchor tag around your header and give it the listview-link role:
<a data-role="listview-link"><h3 class="item-title">${startDate}</h3></a>
Related
I am having a very slow menu drop down experience on windows mobile only. it works ok on chrome and android pc's etc.
image of drop down, GREEN sub menu is very very slow to apper on windows mobile phones (only) you have to keep the logon pressed for at least 1.5 secs before sub menu appears. I would be grateful if somebody could look at the CSS code an see if I need to add / alter any of the settings in CSS
small piece of my nav code
<nav>
<ul id="main-nav" class="clearfix">
<li> Log in
<ul>
<li> Members area </li>
<li> Rythe Centre </li>
<li> Members Email IT Support</li>
</ul>
</li>
</nav>
#main-nav a {
font-size: 100%;
padding: 6px 5px 3px 3px;
margin: 0px;
}
#main-nav a:hover {
padding-right:20px;
}
#main-nav ul a {
padding: 6px;
height: 10px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
font-size: 100%;
background: #090;
}
#main-nav ul a:hover {
background: #000;
}
#main-nav ul ul li:first-child a:after {
position:absolute;
left: -8px;
}
#main-nav ul ul {
top: 0;
left: 90px;
}
#main-nav ul a {
width: auto;
}
#main-nav ul ul a {
background: #f90;
I eventually found the solution, in this post
4 novel ways to deal with sticky :hover effects on mobile devices..
http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
emphasized textCSS's venerable :hover pseudo class forms the backbone of many CSS effects, triggered when the mouse rolls over an element on the page. In today's changing landscape however where touch screen inputs share center stage with the mouse, this has presented a bit of a conundrum for webmasters. Touch based devices in an effort to not be left out in the cold with such a pervasive CSS feature do respond to hover, but in the only way that's possible for them, on "tap" versus an actual "hover". While this is overall a good thing, it leads to what's known as the "sticky hover" issue on these devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document, or in some circumstances, reloads the page before the effect is dismissed.
I have used Method 4- Dynamically add or remove a "can-touch" class based on current user input type.
Good luck.
Mark
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
I guess the simple solution i found is below
ul{
display:flex;
}
A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>
Most drop down lists in websites' main menus are powered by Javascript, which usually displays some div element containing the list on click or hover. But non Javascript users just can't see the drop down list!
The only alternative I can think of is to display the drop down list as a HTML select element, but nobody does that. Is there a better solution out there?
Non-JavaScript menus are surprisingly common and are often times just as clean and can be more efficient than their JavaScript counterparts. You can use JavaScript but it's important to have graceful degradation if you want your menu to be accessible and functional for all users.
There are many examples of these online but the basic premise is to have a normal navigation menu (using UL and LI elements), and use CSS to change the look and appearance based on the user interaction (such as a hover).
Here is an example of a basic menu that will work without CSS or JavaScript and still be perfectly usable (some of the code taken from this answer: https://stackoverflow.com/a/12279190/937012)
<div class="wrapper">
<navigation role="navigation" class="primary-nav">
<ul role="menubar">
<li role="presentation">
<a role="menu-item" href="#" title="First Link">First Link</a>
</li>
<li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
<ul role="menu">
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menu-item" href="#" title="Third Link">Third Link</a>
</li>
</ul>
</navigation>
</div>
As is, this will create a navigation menu (using some accessibility attributes) that is cross-browser and accessible. You can read more about accessibility best practices here: https://www.webaccessibility.com/best_practices.php
You can then apply whichever CSS you like to change the appearance and give the desired "drop-down" effect.
Here is some CSS for the above markup that produces a horizontal menu that features a sub-menu that appears below the second link when the mouse is moved over the second list item.
A {
text-decoration: none;
}
A:HOVER {
color: blue;
}
.wrapper {
width: 90%;
display: block;
}
.primary-nav {
display: block;
margin: 0px auto;
width: 100%;
padding: 0px;
}
.primary-nav UL {
background-color: #ababcd;
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-indent: 0px;
}
.primary-nav > UL {
display: inline;
border: solid 1px #000000;
text-indent: 0px;
float: left;
height: 24px;
margin: 0px;
width: 100%;
list-style-type: none;
border-collapse: collapse;
}
.primary-nav LI {
max-width: 150px;
text-align: center;
}
.primary-nav > UL LI {
display: inline;
float: left;
padding: 0px 3px 0px 3px;
width: 32%;
line-height: 24px;
vertical-align: top;
margin-top: 0px;
text-align: center;
}
.primary-nav > UL LI UL {
display: none;
width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
display: inline-block;
float: left;
margin-left: 0px;
clear: both;
border: inset 1px #898989;
box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
margin-top: 2px;
text-align: left;
clear: both;
width: 100%;
padding: 0px;
}
.primary-nav LI A:HOVER {
background-color: #cdcdef;
}
.primary-nav LI A {
display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
padding: 1px 3px;
margin: 0px 3px;
}
Here is a fiddle that stitches it all together: http://jsfiddle.net/xDaevax/osu7t9ty/
How can I make twitter bootstrap's menu dropdown be on hover instead of a click?
1.Hide dropdown-menu on mouseover.
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
});
2.Hide dropdown-menu on click.
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
});
});
http://jsfiddle.net/7yMsQ/1/
heres a function I'm using to get the navbar dropdowns to slide down on hover instead of just popping in
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
While How to make twitter bootstrap menu dropdown on hover rather than click has been upvoted a lot, with the newer versions of Bootstrap, no need to hack at it.
http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ is a replacement for the existing dropdown.js, and lets you enable on hover. No CSS modifications required.
You can simply do this by using only css. In case of button dropdown.
<div class="btn-group btn-hover-group">
Action 1
<ul class="dropdown-menu pull-right">
<li>Action 2</li>
<li>Action 3</li>
</ul>
</div>
Removed data-toggle="dropdown" from
.btn-hover-group > a:hover ~ ul{
display:block;
}
.btn-hover-group > .dropdown-menu:hover{
display:block;
}
I hope this will suffice your purpose.
You could use a bootstrap 4 like this..
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
then define the class property value following..it should work
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}
This seems really simple, but I can't get the syntax correct w/ the following scenario. I have some dropdown menus defined for the top of a screen. I want the list-items (each LI) to be AT LEAST as wide as its parent LI. It seems like an easy job for min-width and inherit, but I haven't been able to get it to work properly.
Right now, the "inherit" word just gets underlined in VS as if it's not recognized. The page will build/load fine, but it's clearly not reading the argument, as the LI controls aren't as wide as their parent LI's. Any help is appreciated.
Here is part of my HTML:
<ul id="javascriptDDM">
<li> MAIN OPTION 1
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
<li> MAIN OPTION 2
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
</ul>
... EDIT - here is ALL of the javascriptDDM CSS:
#javascriptDDM { width: auto; margin: 0; padding: 0 }
#javascriptDDM li { width: auto; float: left; list-style: none }
#javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; }
#javascriptDDM li a:hover { background: #999999; color: #FFFFFF; }
#javascriptDDM li ul { width: auto; margin: 0; padding: 0; position: absolute; visibility: hidden; z-index: 1000 }
#javascriptDDM li ul li { min-width: inherit; float: none; display: inline }
#javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }
#javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF}
Inherit will make the min-width property take the same "specified" value as the parent's min-width property. If you don't set min-width on a parent element, it won't have any value.
First of all, you should set your LI display mode to block. In this case, you will be at least able to control width of it.
WEFX
Only "block level" elements will inherit the width of their parents. The "a" element is not inherently a "block" level element.
So, to remedy this, you should either add a "display:block" to the "a" element, or, instead, place the min-width CSS on the li instead of the a.