I have list of to-do tasks, which are made as divs, using the stretched link bootstrap class. Click on the each of the to-do task, opens up a modal with detailed view. However, those divs (to-dos) have checked button which needs to be able to clicked. Right now when you click the checkbox, modal opens and it can't be checked.
Can you help me with this issue?
<div>
<div>
<ul class="list-unstyled list-inline">
<li class="list-inline-item"><div class="checkbox checkbox-success checkbox-single"><input type="checkbox"><label></label></div></li>
<li class="list-inline-item">Name</li>
</ul>
</div>
<a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>
There are 2 options based on information in the question:
either put just the checkbox on a higher z-index than the modal... I did this for the first checkbox where you can check/un-check the checkbox but can't touch the text in the label
or put the checkbox and it's label on a higher z-index than the modal... I did this for the second checkbox where you can select the label text and check/un-check the checkbox
Added a light red color so that it is easy to observe the behavior...
working snippet below:
.myCheckbox,
.complete-checkbox-clickable {
position: relative;
z-index: 21;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(238, 149, 149, 0.23) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div>
<div>
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<div class="checkbox checkbox-success checkbox-single">
<input type="checkbox" class="myCheckbox">
<label>(this is where you should put the label) </label>
</div>
</li>
<li class="list-inline-item">Name</li>
<br/>
<li class="list-inline-item">
<div class="checkbox checkbox-success checkbox-single complete-checkbox-clickable">
<input type="checkbox" class="myCheckbox">
<label>2nd checkbox </label>
</div>
</li>
</ul>
</div>
<a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>
Related
I would like to style the sidebar of my application but somehow the css file is ignored or something.
Code SideBar:
<!-- SideNavBar -->
<div class="sidenavbar">
<ul id="sidenav" class="sidenav sidenav-fixed logged-in"
style="display: none; width: 250px;">
<li class="logged-in" style="display: none;">
Logout
</li>
<li class="admin" style="display: none;">
Create Guide
</li>
<li class="admin" style="display: none;">
Create new Account
</li>
<li class="admin" style="display: none;">
Add Admin
</li>
</ul>
</div>
css:
.sidenavbar{
background-color: black;
}
.sidenavbar ul li :hover{
background-color: grey;
}
I believe since the unordered list and the list items have a display of "none" the div of class "sidenavbar" has no width or height. This is why you cannot see the black background.
you should use your custom css file after source css file. e.x:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" src="yourcssfilename.css">
I using a library for datalist/autocomplate. But I want to change the width and shape of the data container. How do I remove arrow in red box and make the width is dynamic according to content? No css used.
Link for the library(awesomplete)
<div class="awesomplete">
<input id="sellerId" name="sellerId" autocomplete="off" aria- expanded="false" aria-owns="awesomplete_list_1">
<ul role="listbox" id="awesomplete_list_1" hidden="">
<li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
<li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
</li>
</ul>
</div>
to remove the arrow just add this css
.awesomplete > ul:before {
display: none !important;
}
Working Sample
.awesomplete > ul:before {
display: none !important;
}
<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete#1.1.5/awesomplete.min.js"></script>
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
Screenshot
I'm trying to change a wrapper's background color by pressing the checkbox.
.switch_1:checked~.table_wrapper {
background: black;
}
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>
</li>
<div class="table_wrapper">
</div>
If you can't change the DOM structure, you can't do it with CSS but you can do it with JS.
$(".switch_1").change(function () {
$('.table_wrapper').toggleClass('active');
});
.table_wrapper.active {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>
</li>
<div class="table_wrapper">
asd
</div>
Here's what would work. The element needs to be a sibling (side-by-side) for it to work.
There's currently no "parent selector" in css: Is there a CSS parent selector?
So I think your best option to deliver the functionality you're working towards would be with javaScript.
.switch_1:checked~.table_wrapper {
background: black;
}
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
<div class="table_wrapper">hello</div>
</div>
</li>
I have a list of items inside of <li> tags in a search tray. I want the user to be able to tap anywhere inside of the <li> tag to toggle the checkbox in the same way that tapping a related label toggles a checkbox.
This is the height and width of the entire <li>:
This is the height and width of the label:
This is how they are set up:
<ul id="catalogs" class="list-group collapse in">
<li class="list-group-item" ng-repeat="catalog in catalogs">
<input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
<label for="{{catalog.id}}">{{catalog.title}}</label>
</li>
</ul>
Is this possible?
you may use display, position and text-indent
label {
display:block;
text-indent:1em;
}
input {
position:absolute;
}
li {
/* demo purpose */ border:solid;
}
<ul id="catalogs" class="list-group collapse in">
<li class="list-group-item" ng-repeat="catalog in catalogs">
<input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
<label for="{{catalog.id}}">{{catalog.title}}</label>
</li>
</ul>
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>