Hello I've got this style
.portfolio-filters input[type=checkbox]:checked{background:#cb2127}
and my code is
<ul class="portfolio-filters list-unstyled">
<li>
<div class="form-group">
<input id="custom-software" type="checkbox" name="" value="" checked="">
<label for="custom-software">Custom Software</label>
</div>
</li>
The problem is that inside this div form-group if I add hidden input fields, it breaks the CSS.
Do you have an idea how I can fix the problem?
How do you hide input? Your should use display:none if you don't want to maintain its position
Related
I have a lot of form-controls in div classes of my website and i want to change the style of only 1 form-control. How it is possible? i tried to give an id but it did not work.
<ul className="nav navbar-nav navbar">
<li><input type="search" className="form-control" id="this" placeholder="Search" id="search_input" /></li>
<div className="col-sm-1">
<li><button type = 'button' onClick={submitSearch}>Search</button></li>
<li>
<div id="search_results">
</div>
</li>
</div>
</ul>
So i want to change the style of this form-control only! how should write is in my css file? Than you.
You've got 2 IDs on the same input..
<input type="search" className="form-control" id="this" placeholder="Search" id="search_input" />
That may be why you are having problems. Remove one of the IDs and then target the other via css.
<input type="search" className="form-control" placeholder="Search" id="search_input" />
input#search_input { /* css style here */ }
If you want to filter some selectors you can use pesudo element:
.form-control:first-of-type //First in its parent
.form-control:last-of-type //last in its parent
.form-control:nth-child(2) //.form-control only where it is second element of its parent
I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.
Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!
EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.
Not with this structure
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio ez-selected">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector
I have the following scenario using Bootstrap.
The problem is that when I change the visibility of the first checkbox, it kinda breaks the spacing of the layout.
<label for="">Filter</label>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 3
</label>
</div>
You can test in this CodePen it by clicking on the button.
Did I build badly the HTML? Or am I missing some feature here
The margin-top for .checkbox+.checkbox is set for -5px, this rule applies, regardless of if the first checkbox is visible or not. Better solution would be to add the margin to the text above (which should be no label!) and don't set different margins for the different checkbox-classes.
<p>Filter</p>
<ul class="checkbox list-unstyled">
<li> <label> <input type="checkbox"> Filter 1</label> </li>
<li> <label> <input type="checkbox"> Filter 2</label> </li>
</ul>
You would need to change your JS to $(".checkbox li").first().toggleClass('hidden')
I'm trying to make a menu. I want text to the right of it but I still want the mobile to be 100% width. When it's on desktop, how do I make the column not wrap around the div? I could make this 100% height, but then on mobile it might not work.
jsfiddle.net/La909cq3
Notice that name goes to the right of the menu if you stretch the container to be desktop width.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-4">
<ul>
<li>
<a ui-sref="manage.newPerson"><b>Groups of People</b></a>
</li>
<li>
<a ui-sref="manage.newPerson"><b>Make a New Person</b></a>
</li>
<li>
<a ui-sref="manage.people"><b>Make a New Manager</b></a>
</li>
</ul>
</div>
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone Number</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I just put clear:both; on your div that wraps around the form. Once i did that your 'name' heading stop floating up to the right of your list of items.
https://jsfiddle.net/6beL3rn5/
It really only has to do with the fact that the menu and the form need to be in separate grid spaces. you have the menu wrapped in col-md-4 which will flowt ot to the left...but no grid class for the div around the form. Doing this will help that
Look at how I added an outer div with
<div class="row">
and the added the col-md-12 class to both the menu and the form divs.
http://jsfiddle.net/gbn4hnw1/
One solution is to put col-md-4 around the second div http://jsfiddle.net/La909cq3/1/
<div class="col-md-4">
Have you tried using word-wrap in CSS?
Try this, I find it works well for me.
word-wrap: break-word;
white-space:normal;
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
My understanding is that Materialize doesn't support styled multiple-select boxes - you have to specify browser-default and not use Materialize styling. (correct me if I'm wrong)
So I've tried to make an equivalent with Materialize dropdown with checkboxes inside the dropdown like this:
<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true">
Relates to topics...</a>
<ul id='topics_dropdown' class='dropdown-content'>
<li>
<input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
<label for="report_topics_409928004">Engagement</label>
</li>
<li>
<input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
<label for="report_topics_669658064">Appraisal</label>
</li>
<!-- etc. -->
</ul>
But there's a glitch in how this gets rendered. The text and boxes gets offset by half a line downward, so the highlighting hover effect highlights a rectangle that overlaps two different options. Is there any way to correct this glitch?
Here's a screenshot. It's not the same content as the example code above but it's the same dropdown-checkbox structure.
My workaround has been to put each checkbox in its own div inside the dropdown rather than using the dropdown list structure
<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> Relates to topics...</a>
<div id='topics_dropdown' class='dropdown-content'>
<div>
<input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
<label for="report_topics_409928004">Engagement</label>
</div>
<div>
<input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
<label for="report_topics_669658064">Appraisal</label>
</div>
<!-- etc. -->
</div>
It doesn't have the hover effect, but it works.
[type="checkbox"]+label {
display: inline;
}