I'm trying to replace a checkbox and make it into a button. I've done this before, but for this site I'm using Easy Digital Downloads Front End Submissions. I've searched and searched, also gone through multiple posts here on the site.
I don't know how this was made, but I can't seem to wrap my head around it as the label seems to come before the class. It has this selectit class I've been trying to mess around with, but whatever I do I can't make a button.
When I try something like input[type=checkbox] + label it doesn't actually affect anything.
Other examples would be .selectit input[type=checkbox]:before This one works.
As well as .selectit input:checked:after
But again, I can't add anything with + label it seems.
Well I can make one that has a hover, but not one with a checked state and a color change for example.
I should note that I cannot change any HTML. The way the checkbox is built, I have to stick with, so I'm trying to make a pure CSS solution. But I can add jquery into the page
Here's the HTML for the checkboxes. I only really want the parent checkbox to be affected by the hover and checked state.
<ul class="fes-category-checklist">
<li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
<ul class="children">
<li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>
<li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>
<li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>
<li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
</ul>
</li>
</ul>
I hope someone has some answers
Thanks!
EDIT
I was advised to update my question, because I can insert jquery into the page. Although, this is not something I have much experience with myself.
Original, no javascript, crazy answer
Your problem is that you can't select a parent of an element, and so you can't say "if this box is checked, make its parent label change color." Sadly, the :has CSS selector isn't supported by anything, or that could save you.
However. If you're insane, and you hate it when things look nice, you can do some crazy stuff with outlines and margins. This is mucho janky but it sort of works. Kinda.
You can play around with it in this codepen: https://codepen.io/anon/pen/WPQJgw
Follow-up, non-crazy, uses jQuery answer
Okay your edit says you can use javascript or jQuery. Let's assume you already have jQuery loaded on the page, since that makes for short code.
Codepen here: https://codepen.io/tobyinternet/pen/daYqJq
I'll explain what's up here.
You can't change the HTML, but (with javascript) you CAN assign classes to elements. So first, we create classes that modify the existing elements.
Strip bullets off list items
Hide the actual checkboxes
Make the labels into block elements and give them colors and hover states
Create a style to indicate when a "button" is "checked"
Then we use javascript to first apply button styles on page load, then apply appropriate checked/unchecked style when an element is clicked.
The purpose of doing it this way is that if a user can't (or doesn't want to) use javascript, they just see checkboxes. Still totally usable, good for accessibility. If they do have javascript installed, then ta-da! Buttons.
$(document).ready(function(){
$('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');
$('.selectit').addClass('checkbutton');
$('.checkbutton').click(function(){
if( $(this).children('input:checkbox').is(':checked') ) {
$(this).addClass('ischecked');
} else {
$(this).removeClass('ischecked');
}
});
});
.nolist {
list-style: none;
}
.nolist li {
margin: 20px 0;
}
.checkbutton {
padding: 8px 20px;
text-align: center;
display: block;
width: 140px;
height: 30px;
line-height: 30px;
margin-right: -130px;
border: 1px solid black;
border-radius: 6px;
background-color: yellow;
transition: all .2s;
box-shadow: 0px 3px 8px rgba(50,50,50,.5);
}
.checkbutton:hover {
background-color: #CCCC00;
}
.checkbutton:active {
box-shadow: 0px 1px 2px rgba(50,50,50,.5);
}
.checkbutton input[type="checkbox"] {
position: absolute;
left: -99999px;
}
.ischecked {
background-color: blue;
color: white;
}
.ischecked:hover {
background-color: lightblue;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="fes-category-checklist">
<li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
<ul class="children">
<li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>
<li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>
<li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>
<li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
</ul>
</li>
</ul>
Related
I want to show notification count in notification tab when receive new notifications. like in this picture. please guide me. If you know the html and css code please assist. thank you all. Good day to you.
If I add this code
<span class="badge" style="background-color: #f0ad4e">1</span></a></li>
after the navbar it appeaser. but it display every time with or without new notification. is there anyway to fix this?
here is the code
<li class="active" > Notification <span class="badge" style="background-color: #f0ad4e">1</span></li>
badge css
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
I don't know how you're choosing to update the notification count, so I've just provided a very basic way for you to update notifications. You can do something with a simple JavaScript DOM script where you can trigger the notificationCounter() function. I've updated your HTML code as well (see below). Be sure to include it into .js file and load it in the footer of your HTML document.
Javascript:
function notificationCounter() {
counter += 1;
document.getElementById("NotificationBadge").innerHTML = counter;
}
const counter = 0;
HTML:
...
<li class="active" > Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></li>
...
CSS: leave it as is.
So i was looking into Pagination dependency in ReactJS. My code is working fine but the formatting of pagination is quite out of order. How can i improve my pagination outlook. It's currently showing as bullets
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={18}
totalItemsCount={this.state.totalBooks}
pageRangeDisplayed={3}
onChange={this.handlePageChange} />
It's showing in the browser as the attached image
From the docs of react-js-pagination:
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
So if you are using Bootstrap, it should just work.
If not the package provide some props to set classes to different elements, and then you should style them :
innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...
You have to acquire some notion about DOM scaffolding and CSS:
ul {
list-style: none;
padding: 0;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration:none;
color: #999;
}
ul li a:hover, ul li a.active {
color: #333;
}
<ul>
<li><a href="#" /><</a></li>
<li><a href="#" class="active"/>1</a></li>
<li><a href="#" />2</a></li>
<li><a href="#" />></a></li>
</ul>
So i found the Mobile Stepper of material-ui helpful in this case. I imported import MobileStepper from '#material-ui/core/MobileStepper';
I just had to make a simple updatePage(i) function that took +1 or -1 depending upon the next or previous page and corresponding any other function calls can be done in update page function. Hence easily pagination can be done and new information can be rendered accordingly. Although this is not the exact correct method, but it helped me with my functionality.
<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />
I am creating a navigation structure. I tried to use AngularStrap and Bootstrap, but as soon as I injected them into my app, Angular failed. I found this link and constructed my navigation tab-bar. I like how easy it is to customize. My problem is, I don't know how to apply the css for the selected tab in angular. I can't apply an id to an element conditionally, and when I try and break up the css into multiple classes, the tabs don't display the same way.
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);">
{{tab.title}}
</li>
</ul>
vs.
<ul class="tablist">
<li id="selectedTab">Admin</li>
</ul>
What is the best way to apply the selected formatting? See this Fiddle for a more fleshed out example.
Updated: http://jsfiddle.net/dLemh/6/
to have background color change use css important on the class
ng-class="{selected: isSelected(tab)}"
$scope.currentSelectedTab = {};
$scope.setSelectedTab = function(tab){
$scope.currentSelectedTab = tab
}
$scope.isSelected = function(tab){
if(tab == $scope.currentSelectedTab){
return true;
}
return false;
}
Please let me know if anything
I found this SO Post that I was able to use and fix the CSS formatting with regards to their priority.
.tablist li.selectedTab a {
background: none;
border: 2px solid #6B74C6;
border-bottom: 0px;
background-color: #F3F3F3;
color: #0378D9;
text-decoration: none;
}
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
{{tab.title}}
</li>
</ul>
What would be the way to style a bunch of label/drop down lists in a row but, where each drop down list has a label right above it.
Currently I have in my html
<label for="select1">Label1</label>
<select id="select1">...<select>
<label for="select2">Label2</label>
<select id="select1">...<select>
<label for="select3">Label3</label>
<select id="select3">...<select>
By default, they all line up in one row.
If I apply this style
label {
display:block;
}
I get all of them lined up in one column, for the lack of the better word.
So how would I style them so that a bunch of label/drop down lists in a row but, where each drop down list has a label right above it? no tables of course.
Thanks.
Wrap each "list / label" combination within a block element. You can then float that element to have multiple items on the same row:
<div class='lst'>
<label for="select1">Label1</label>
<select id="select1">...<select>
</div>
<div class='lst'>
<label for="select2">Label2</label>
<select id="select1">...<select>
</div>
<div class='lst'>
<label for="select3">Label3</label>
<select id="select3">...<select>
</div>
div.lst {
float: left;
margin: 0 5px 0 5px;
}
div.lst label {
display: block;
}
Example fiddle: http://jsfiddle.net/Z5hAm/
Update: Refined Cross-browser Display
Not quite sure what your final goal is, but if I interpreted correctly, I think something like this updated fiddle demonstrates is what you are going for, which uses this (requires setting an explicit width to work with):
CSS
label, select {
display: inline-block;
width: 100px;
}
label {
position: relative;
top: -1.2em;
left: 5px;
}
select {
margin: 1.5em 0 0 -100px;
}
Update for Multiple Rows
Set a wrapper element of fixed width like this fiddle to cause the rows to wrap.
You'll probably have to group the label and select in another tag like a p, div or a fieldset and then make that element display:inline-block or float:left.
Check out the menu at the top of this page (Questions, Tags, Users, ...) It's put together with an unordered list.
<div class="nav mainnavs">
<ul>
<li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li>
<li><a id="nav-tags" href="/tags">Tags</a></li>
<li><a id="nav-users" href="/users">Users</a></li>
<li><a id="nav-badges" href="/badges">Badges</a></li>
<li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
</ul>
</div>
You could stick each of your label/dropdown pairs into a list item.
<li>
<label for="select1">Label1</label>
<br />
<select id="select1">...<select>
</li>
I ended up sticking these in a table because I have several of these rows and they all have to line up.
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }