I wonder if there is a way to make one item in a dropdown menu disabled, e.g. not selectable?
Jade markup:
.ui.dropdown
span.text My Menu
i.dropdown.icon
.menu
.item 1
.item 2
.item 3
Say, item 3 should be not possible to select?
In order to disable a dropdown, use disabled class:
<div class="ui disabled dropdown">
Disabled dropdown <i class="dropdown icon"></i>
<div class="menu">
<!-- Any subsequent options are not available -->
</div>
</div>
It also works for individual options:
<div class="ui dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="disabled item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
Working example
This feature is coming in SUI 2.0
Related
I'm trying to customise a tab menu in bootstrap so that when a link is selected (active) it is highlighted in a coloured box. I can't seem to target the active element in css. Can someone advice how I need to do this? The html is as follows:
<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
<a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
<a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
<a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>
These link to some tabs on the same page:
<div class="col col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- ORIENTATION TAB-->
<div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
<p>...</p>
</div>
<!-- EDUCATION TAB-->
<div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
<p>...</p>
</div>
</div>
</div>
Then the css for the nav-pill-custom class is given as follows.
.nav-pill-custom {
outline:none !important;
color: #6481A6;
}
.nav-pill-custom:hover {
background-color:#91cbeb;
border: #91cbeb;
}
.nav-pill-custom:focus,
.nav-pill-custom:active
{
background-color:#91cbeb;
border: #91cbeb;
}
Each of rthe css blocks works fine apart form the one for targeting the active link. I've also tried it without .nav-pill-custom:focus and I've tried it adding in .nav-pill-custom:active a targeting the anchor, which was a solution in another stackoverflow question but it doesnt seem to be working for me. How do I make this work?
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I have this simple nav.
<div class="ui attached stackable menu">
<div class="ui container">
<a class="item">
Home
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="item">
<div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
</div>
</div>
</div>
I am trying to add styling to <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div> but no styles are being applied, anything .. for example
input.dictionary{
border:1px solid red;
}
does not have any effect on it.
OK So what's happening is that Semantic UI is overriding your custom style:
http://i.imgur.com/ayRs3Kx.png
As you can see your custom CSS is crossed out in chrome developer tools.
You have two choices
Make your CSS Selector more specific
Include !important after your style e.g. border:1px solid red !important;
Option 1 is more preferable. I've made a JSFiddle here with an example. By adding red-border I've made the style more specific than the Semantic UI CSS.
When you find your CSS does not seem to be working, use the dev tools to see if it shows up, and if it does what is overriding it.
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>