I open and close toggle if i click to href=#collapseFive
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapseFive">
<strong><i class="icon-caret-down"></i>SomeText</strong>
</a>
<div id="collapseFive" class="panel-collapse collapse">
I want to set default toggle "open" for div id="collapseFive" class="panel-collapse collapse"
So how can do this without javascript ?
I am not giving you complete solution but you can try this way.. please open this fiddle:
<label for="menu-toggle">Click me to toggle menu</label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li>First link</li>
<li>Second link</li>
<li>Third link</li>
</ul>
css
label {
cursor: pointer;
}
#menu-toggle {
display: none; /* hide the checkbox */
}
#menu {
display: none;
}
#menu-toggle:checked + #menu {
display: block;
}
JsFiddle
I'm afraid you can't set the data-* attributes using only CSS. That requires attribute values (other that "style") to be changed and that's where JavaScript comes in.
You can check out this JSFiddle where an accordion has been created only with CSS:
http://jsbin.com/UnEwelO/1/edit
You might also find this article interesting:
http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/
Related
I have a boostrap nav with dropdowns.
<ul class="nav navbar-nav pull-right">
<li>
<div class="dropdown">
<a data-target="#" data-toggle="dropdown">User <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Rediger konto</li>
<li>Vis ordre</li>
</ul>
</div>
</li>
....
Between the menu entries I want to add pipes.
#options-nav .nav>li:after {
content: "|";
...
}
https://jsfiddle.net/casperskovgaard/eww51eo3/
Problem is that the pipe for the dropdown entry is shown on a new line
The div inside the list item is the cause of the issue.
Because of its display: block style it is pushing down the after pseudo-element.
Add a display: inline-block to the div alongside the after pseudo-element:
#options-nav .nav>li>div {
display: inline-block;
}
I am trying to have a submenu dropdown inside a dropdown, using MaterializeCSS framework. I tried with the following code, but it didn't work.
<!-- this the main dropdown -->
<ul id="MainDropDown" class="dropdown-content">
<li>Dropdown1<span class="right caret">►</span></li>
<li>Dropdown2<span class="right caret">►</span></li>
<li>Dropdown3<span class="right scaret">►</span></li>
</ul>
<ul id="drop1" class="dropdown-content">
<li>Create</li>
</ul>
<ul id="drop2" class="dropdown-content">
<li>Create</li>
<li>Update</li>
</ul>
<ul id="drop3" class="dropdown-content">
<li>Create</li>
</ul>
I was having the same issue myself.
Turns out it's as simple as nesting another dropdown link,
setting an appropriate gutter, and making sure the overflow of
dropdown-content is set to visible.
Here is a link to the modified jsfiddle linked in Nested dropdowns in materialize
https://jsfiddle.net/fb0c6b5b/
$('.dropdown-button2').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
.dropdown-content{
overflow: visible !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
I tried it here but my was aligned on the same line from the dropdown, then did it and it worked:
.dropdown-content {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
}
Based on the answer from #LibanH and updated for version v1.0.0, you need some change.
constrain_width must be replaced by constrainWidth and gutter is no longer an option.
In order to display the nested dropdown at the good position, we need to get the height of the selected item in first dropdown and set position with CSS
$('.dropdown-button').dropdown({
onOpenStart: function() {
var selectedItem = $(this).find('.selected');
$('#dropdown2').css('top', selectedItem.outerHeight() + "px");
}
});
$('.dropdown-button2').dropdown({
constrainWidth: false //change
hover: true,
alignment: 'left'
}
);
and add some CSS
#dropdown2 {
position: absolute;
left: 100%;
}
I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I'm trying to put a checkbox form in a dropdown like this:
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Dropdown Form<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><label class="checkbox"><input type="checkbox">Two</label></li>
<li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>
</li>
</ul>
Here is a Demo in Bootply
However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.
Here's what we'll build:
HTML
Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns & Checkboxes. Inside of each li, we'll use a label instead of an a element, so that we can wrap the checkbox in a label and make the entire row clickable.
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
CSS
We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .active and :hover.
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
JavaScript
Some other housekeeping, we'll manually keep an .active class flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
We'll also want to allow multiple selections by allowing the menu to stay open on internal click events by stopping the event from bubbling up
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
Demo in Stack Snippets
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
body {
padding: 15px;
}
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
<li >
<label>
<input type="checkbox"> Pepperoni
</label>
</li>
<li >
<label>
<input type="checkbox"> Peppers
</label>
</li>
</ul>
</div>
The way Bootstrap uses checkboxes in their docs is as following:
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
So yours would look like:
<ul>
<li class="dropdown">
Dropdown Form<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
</ul>
</li>
</ul>
The docs:
http://getbootstrap.com/css/#forms
I think a simple solution would be,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="sampleDropdownMenu" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
</div>
</div>
The problem here is that your checkboxes are being styled (by Bootstrap) with:
.checkbox input[type=checkbox]{
position: absolute;
margin-left: -20px;
}
This is probably done to avoid those "bunching" issues you see when you remove the .checkbox class on the <label>, but that negative margin-left is causing problems in this case.
One way to address this with minimal adjustment to your markup and CSS would just be to add some padding on the <label> to account for it:
label.checkbox{
padding-left:20px;
}
Here's an updated Bootply to show you the code in action. Hope this helps! Let me know if you have any questions.
Can anyone tell me how to disable a div or elements inside a div?
I have a jstree in my div and I want to disable the div/jstree.
Thanks!
I made a simple example for you here
Basically, it creates a div over your jstree's one so that it is disabled from user interactions.
I guess you can make it visually better, but i think this gives you the idea.
I also checked that there is no strigth way to disable a jstree, even if it could be usefull.
Maybe you'd want to ask the dev in google group...
HTML Code:
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
<div id="demo" style="height:100px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="disabler"></div>
</div>
CSS code:
#jstree-wrapper {
position: relative;
}
#disabler {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.5;
}
JS Code:
$(document).ready(function() {
$("#demo").jstree();
$("#disable").on("click", function() {
$("#disabler").css("width", $("#demo").width());
$("#disabler").css("height", $("#demo").height());
});
$("#enable").on("click", function() {
$("#disabler").css("width", "0px");
$("#disabler").css("height", "0px");
});
});
Here's a very good example I didn't find done so simple and good anywhere else. In this example you can simulate the 'disabled' attribute only by adding CSS style as I entered in the code snippet. It disables by using the CSS "visible:hidden", and adds a translucent mask to cover the whole div area and disable anything inside it. You can choose to comment out the 'Visibility:hidden' to be able to see the elements behind the mask, but then they will be tabable, if you don't mind them hidden then uncomment that style.
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.2;
background-color: black;
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
</div>
<button>Dummy</button>
<br/>
<br/>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>