I got a markup like below and without any styling, the Twitetr Bootstrap css seems to mess something such that the checkbox falls below the label text.What is the thing i got to change
<ul >
<li>
<label>1<input type="checkbox" id="chk1" name="chk1"></label>
</li>
<li>
<label>2<input type="checkbox" id="chk2" name="chk2"></label>
</li>
</ul>
screenshot http://img525.imageshack.us/img525/3390/savec.jpg
inputs-list doesn't seem to be a css class anymore. I used class="nav nav-list" instead.
Add the class "inputs-list" to your <ul>. Everything will magically work.
Related
I've created a pure CSS navigation for a one pager, demo here:
http://webentwicklung.ulrichbangert.de/thread36-nav-6.html
Works fine so far, but additionally I'd like to hide the menu when a link is clicked. I tried wrapping the ul in the nav by a label for the radio button that hides the menu, but no success. Obviously the link captures the click event and it doesn't reach the label.
HTML for the radio buttons:
<!-- menu visible when checked -->
<input type="radio" name="rbnav" id="rbnav1">
<!-- these should hide the menu -->
<input type="radio" name="rbnav" id="rbnav2">
<input type="radio" name="rbnav" id="rbnav3">
<input type="radio" name="rbnav" id="rbnav4">
HTML for the nav:
<nav>
<ul>
<label for="rbnav4">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</label>
</ul>
</nav>
I there a pure CSS solution for this task? I read this thread:
Activate Label and Link with one click
#Aziz writes "I don't think there is pure CSS solution to your problem, you'd have to use some JavaScript code". Can anyone confirm that it's definitely not possible by pure CSS or on the other hand point out a solution?
I don't know how have you structured your code, but, the better way(maybe the only) way to do this is using JavaScript.
If you use CSS class to open and close the nav, you should create a function that changes the class of it.
Can you show more about your code? Are you using another JavaScript functions?
I'm trying to wrap a standard list item format in an Angular directive, and then use it with ng-repeat inside various list types. The problem is, the directive seems to lose the class of the parent, so the list doesn't render the way it should. Here's an example:
<ul class="nav nav-pills nav-stacked affix">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
Renders exactly like:
<ul class="nav navbar-nav navbar-right">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
So, both of these renders exactly the same, neither the way I want them to. How do I make my list item directive aware of its parent's class?
Edit:
<ul class="nav nav-pills nav-stacked affix">
<li ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</li>
</ul>
The my-list-item directive looks something like this:
<a class="myClass" href="{{item.target}}"><span ng-bind-html="item.text"></span></a>
<div> isn't a valid child of <ul> in the first place. Really the only valid child is <li>
The bootstrap css won't expect it either. Use markup that matches bootstrap suggested markup and apply any appropriate classes that are used in the docs.
As for what gets rendered in <my-list-item> you would need to show what that html looks like if it is also problematic
Reference W3C <UL> Specs
Permitted contents
zero or more li elements
I have created a wizard using bootstrap and some custom styling
fiddle here
All I want to do now is add a couple of dashes (-) between the tabs
[One]----[2]----[3]
Can someone please help me out here.
Thanks,
Add them after your <a> tag
Like this:
<li class="active"><span id="t1" class="textColor">1</span>-----------
</li>
<li><span class="textColor">2</span>-------
</li>
<li><span class="textColor">3</span>----
The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^
What would be prefered semantic and accessible markup for this divider list?
I'm using jQuery mobile for a project and it uses this mark-up
<ul data-role="listview" data-dividertheme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
<li data-role="list-divider">C</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
</ul>
I think for dividers (A,B,C...) HTML Heading tags should be used.
Definately not ul since it is aplhabetical it should be either ol with list-style-type:upper-alpha; with nested list.
I would go with a html something like:
<ol>
<li>
<ul>
<li>Adam</li>
<li>Alan</li>
</ul>
</li>
</ol>
Sample: http://jsfiddle.net/easwee/8UUbh/5/
I would use a definition list
<dl data-role="listview" data-dividertheme="d" data-inset="true">
<dt data-role="list-divider">A</dt>
<dd>blblblaba</dd>
</dl>
I know that the titles are not definition titles, but its clear what elements are the dividers and what elements are the contents.
edit i think #easwee's solution is much better in a semantic point of view.