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
Related
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')
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
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;
}
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