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;
}
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
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
I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.
Using this template: http://foundation.zurb.com/templates/workspace.html
Can someone tell me how I can move the search button to the right as in pic where the blue button is located?
This is what I am using now:
<input type="submit" value="Search" style="float: right;">
Fiddle: Search button code
<ul class="right">
<li class="search">
<li class="has-button">
/* Original template form */
{#<form>#}
{#<input type="search">#}
{#</form>#}
/* My form with code */
<form action="{{ path('sym_corp_search') }}" method="GET">
<label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
<input type="submit" value="Search" style="float: right;">
</form>
</li>
</li>
/* Original form button in blue */
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
Using the foundation classes, you can manage to perform this layout with your own inputs, your code will look like this:
<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
<li class="search">
<label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
</li>
<li class="has-button">
<input type="submit" value="Search" class="small button" />
</li>
</form>
</ul>
You have to use margin property like margin-left:50%; or more and you can also use ... tag but it will make button position to center. float:right is can be used in div, Not in button.
Move your button in a div :<div id="mybtn"><input type="submit" value="Search"></div> add CSS : #mybtn {float : right;display : inline-block;}
I have an html page given below
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div class="content-primary">
<form id="frm1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="Name">name:</label>
<input type="text" Name="Name" id="Name" value="" />
</li>
<li data-role="fieldcontain">
<label for="No">no:</label>
<input type="text" No="No" id="No" value="" />
</li>
<li data-role="fieldcontain">
<label for="countryName">Country name:</label>
<input type="text" countryName="countryName" id="countryName" value="" />
</li>
<li data-role="fieldcontain">
<label for="stateName">State name:</label>
<input type="text" stateName="stateName" id="stateName" value="" />
</li>
<li data-role="fieldcontain">
<label for="cityName">City name:</label>
<input type="text" cityName="cityName" id="cityName" value="" />
</li>
</form>
</div>
</div>
</body>
and i am using the following jquery 1.3.2 links displayed in the link given
http://jquerymobile.com/download/
and i have css file given below
.ui-body-c { background:#FFFFFF !important; }
.ui-page .ui-header {
background:#0B0B3B !important;
}
.ui-page .ui-footer {
background:#0B0B3B !important;
}
When i am using the above code the list which is displayed contains grey color.
how will i get white color instead grey to the list displayed.
Thanks in advance
I can't actually test this but I have noticed oddities like this before when a css rule is defined as background-color: and you try to override with just background:
Try changing your rule to say background-color: instead. Also, if you can help it, stay clear of !important unless you're sure it's what you need. It can be a real pain when your css gets more complicated.
All you need is to set background-color rule to .ul-body
.ui-body{
background-color:#FFF;
}
Don't use !improtant, Keep it as a last resource.
Note: In case some other list might contain a class named ui-body, but you can give parent ID or class as selector to your custom class .ui-body
#Parent .ui-body{
}
.Parent .ui-body{
}
fiddle