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>
Related
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>
I have a radio button that, when I check it, should affect another element.
I couldn't do it. I've tried to affect a couple of elements. Nothing worked.
My HTML markup:
<label for="1">
<div class="card card-1">
<input class="card__input-1"type="radio" name="card" id="1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
SASS:
.card__input-1:checked .card-1{
background-color: orangered;
}
No error messages.
You can use the + or ~ CSS selectors to affect elements following the input in the document flow, but which share the same parent, like so:
.card__input-1:checked ~ .card-1 {
background-color: orangered;
}
<label for="1">
<input class="card__input-1"type="radio" name="card" id="1">
<div class="card card-1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
The + selector allows you to select an element that appears immediately after within the document flow, and the ~ selector allows you to select any element that follows (so is sort of like a "super-plus" selector).
But to affect parent elements you will need to use JavaScript
I need to make that the focus of the browser stays in a element even though the user keeps scrolling. Basically I have a dropdown menu with a scrollable feature so I need to keep the focus on it if the user leaves the pointer inside the menu and keeps scrolling.
It's than even possible? I'm new to html.
My html is (with some angular):
<ul ng-if="filter.isSearchListType && hasFilterValues(filter)" class="dropdown-menu scrollable-menu">
<li class="individual-search">
<input type="search" ng-model="searchInputText" class="form-group filter-input" placeholder="Nombre o E-mail" />
<i ng-show="searchInputText" class="fa fa-remove clear-search-icon" aria-hidden="true" ng-click="searchInputText = ''; $event.stopPropagation()"></i>
<i class="fa fa-search search-icon" aria-hidden="true" ng-click="$event.stopPropagation()"></i>
</li>
<li ng-repeat="filterValue in filter.values | searchInData:searchInputText">
<a href="#" ng-click="selectFilterValue(filter, filterValue.id)" ng-class="{ 'selected': isSelectedFilter(filter, filterValue.id) }">
{{filterValue.label}}
</a>
</li>
</ul>
My css is:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
And the render of this is:
DropDown-Menu Scrollable
And last, but it's not so important, it's posible to keep a li pin or fixed and make the rest of the li scrollable??
Thanks!!
I have pagination
How can I change background of pagination__link with text "left" when click on the other links? It is necessary to use only CSS.
You can do this, but frankly it's messy, using CSS flexible-boxes along with the relatively new :focus-within pseudo-class. This does require reversing the order of <li> elements within the <ul> however:
.pagination {
/* sets the display to use the flex layout: */
display: flex;
/* ensures the contents of the <ul> are shown in
columns and in reverse-order: */
flex-direction: column-reverse;
}
/* selects first the <li> that has a focused element
within it, then finds all subsequent <li> elements,
using the general-sibling combinator ('~') that
also matches the :last-child pseudo-class (there can,
obviously, be only one) then finds the <a> element(s)
which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
background - color: red;
}
<ul class="pagination">
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#">
Page 2
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
Page 1
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
left
</a>
</li>
</ul>
External JS Fiddle demo.
References:
:focus-within.
flex-direction.
General Sibling Combinator (~)
"Using CSS Flexible Boxes" (MDN).
input[name="radio"]{
display: none;
}
label{
text-decoration: underline;
color: blue;
}
input[name="radio"]:checked + label{
background-color: yellow;
}
<ul class="pagination">
<li class="pagination__item">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">left</label>
<!--
<a class="pagination__link" href="#">
left
</a>
-->
</li>
<li class="pagination__item">
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 1
</a>
-->
</li>
<li class="pagination__item pagination__item--active">
<input type="radio" id="radio3" name="radio" />
<label for="radio3">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 2
</a>
-->
</li>
</ul>
Maybe it's not the answer what you want.
But I think it can be good hint for your problem.
You can use the checkbox trick or radio trick.
I have the following HTML definition.
(I'm using Knockout)
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName"></span>
<span class="right" data-bind="text: measurement"></span>
<input type="checkbox" />
</li>
</ul>
I would like these to display aligned as the following
Item1 measurement1 Checkbox1
Item2 measurement2 Checkbox2
Item3 measurement3 Checkbox3
I would like this to be aligned the following way:
Column 1 is floated to the far left.
Column 3 (The input checkbox) is floated to the far right.
Column 2 is is on the far right, but to the left of Column3
I've tried working with DIVs and the float/display attributes.
I haven't been able to achieve the desired visual behavior.
How would I accomplish this?
float and text-align ?
li {
display:block;
text-align:right;
width:200px;/* whatever width you set here or in parent */
}
li :first-child {
float:left;
}
input {
vertical-align:middle;/* ? */
}
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName">item</span>
<span class="right" data-bind="text: measurement">measure</span>
<input type="checkbox" />
</li>
</ul>
One option might be to use Bootstrap's grid system — you would be able to specify the proportional width of each column. Additionally, it becomes easier to handle its responsiveness to screensize.
In your case, you might use it like this:
<div class="container-fluid">
<ul data-bind="foreach: itemList">
<li>
<div class="row">
<div class="col-xs-6">
<span data-bind="text: displayName"></span>
</div>
<div class="col-xs-3">
<span class="right" data-bind="text: measurement"></span>
</div>
<div class="col-xs-3">
<input type="checkbox" />
</div>
</div>
</li>
</ul>
</div>
See more grid examples here.
--
If you are trying to present tabular data, you might also consider using HTML tables and specifying its percentage column width.
Might I recommend a flex-box? I put a growing spacer in to push the middle column over to the right. Modifying GCyrillus' answer:
li {
display: flex;
justify-content: space-between;
width: 90%;
/* whatever width you set here or in parent */
}
li .spacer {
flex-grow: 1;
}
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName">item</span>
<span class="spacer"></span>
<span class="right" data-bind="text: measurement">measure</span>
<input type="checkbox" />
</li>
</ul>