i am beginner in css i am building a webpage in bootstrap . i want two labels Percentage and UpperLimit both to the same level i applied the inline class but unable to figure it out why there is level difference and how to correct it.
my html code is
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Promo Value</label>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" class="inline" checked>Percentage</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input" disabled="true" />
</label>
<br />
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3">
<label class="radio inline" id="label3">Fixed Amount</label>
<input type="text" class="inline" placeholder="Amount Rs" disabled="true">
<hr class="hhhh"></hr>
</div>
</div>
</form>
and my main.css file is
.inline {
display:inline-block;
margin-right:20px;
}
.inline1 {
display:inline-block;
height: 50px;
vertical-align: middle;
margin-top: 2px;
}
and the screen shot is
as
as you can see the difference between label Upper Limit and Percentage is clearly visible how to resolve it help !!
The trick here is to over-ride some of the Bootstrap styles.
Here is one way of doing it. Modify your HTML slightly by keeping the labels and input fields separate (not nested). Use the "for" attribute to link the labels to the input fields.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Promo Value</label>
<div class="controls">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked>
<label class="radio inline" id="label1">Percentage</label>
<label for="hello" class="inline" id="label2">Upper Limit</label>
<input id="hello" class="inline" type="text" placeholder="Text input" disabled="true" />
<br />
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3">
<label class="radio inline" id="label3">Fixed Amount</label>
<input type="text" class="inline" placeholder="Amount Rs" disabled="true">
<hr class="hhhh"></hr>
</div>
</div>
</form>
I used the following CSS, making the selectors specific enough to override the Bootstrap styles.
.form-horizontal .control-group label.inline {
display: inline-block;
margin-right: 20px;
line-height: 30px;
vertical-align: baseline;
margin-top: 2px;
}
.form-horizontal .control-group input.inline {
vertical-align: baseline;
}
.form-horizontal .control-group .radio.inline {
padding-left: 10px;
}
.form-horizontal .control-group input[type="radio"] {
float: none;
display: inline-block;
vertical-align: baseline;
}
The gist of it is to make sure that the various inline elements are use vertical-align: baseline.
The styling is a bit complex, but it kind of works.
I did not try to place the .control-label element, but that should be easy enough.
The demo fiddle is: http://jsfiddle.net/audetwebdesign/PhqhS/
Related
I have some code on a processwire website, I'm adding new css to a form and I want to hide the label for text and textarea inputs, but show the label on everthing else.
This hides the label (class is InputfieldHeader) :
#FormBuilder_contact-form .Inputfield .InputfieldHeader {
display: none;
}
I tried using label[for="type=text"],
I also tried .InputfieldHeader input([type=text])
but I cannot seem to get the css to work and googling hide label with CSS just doesn't bring up anything relevant.
This is the html for one of the form fields:
<div class="Inputfield Inputfield_company_registration_number InputfieldText InputfieldStateRequired InputfieldColumnWidth" style="width: 50%;" id="wrap_Inputfield_company_registration_number" data-original-width="50">
<label class="InputfieldHeader InputfieldStateToggle" for="Inputfield_company_registration_number">Company Registration Number</label>
<div class="InputfieldContent ">
<input id="Inputfield_company_registration_number" class="required InputfieldMaxWidth" name="company_registration_number" type="text" maxlength="2048" placeholder="Company Registration Number (If applicable)">
</div>
</div>
I've got 53 form fields so I was hoping to avoid using css for label for field1, label for field2 etc
Any ideas?
Checkout this example--
HTML-
<label for="a">Label A</label>
<input type="text" id="a">
<label for="b">Label B</label>
<input type="text" id="b">
<label for="c">Label C</label>
<input type="text" id="c">
CSS-
label[for='a'], label[for='b'] {
display: none;
}
This code snippet hide labels for A and B input.
Based on your code
label[for='Inputfield_company_registration_number'] {
display: none;
}
this will work fine.
The HTML structure needs to change if you want a CSS only solution. The label needs to come after the input/textarea and the input/textarea can't have a parent -- basically label and input need to be siblings, and label needs to come after input, it's the squiggly ~ that makes this possible (read more about Subsequent-sibling combinator if interested)
.input-field { display: flex }
.input-field label { margin-right: 1rem; order: -1 }
.input-field input[type=text]~label, .input-field textarea~label { display: none }
<div class="input-field">
<input type="text" id="textInput" placeholder="text input">
<label for="textInput">Text Input</label>
</div>
<div class="input-field">
<input type="number" id="numberInput" placeholder="number input">
<label for="numberInput">Number Input</label>
</div>
<div class="input-field">
<input type="password" id="passInput" placeholder="p455w0rd input">
<label for="passInput">Password Input</label>
</div>
<div class="input-field">
<input type="email" id="emailInput" placeholder="01#email.input">
<label for="emailInput">Email Input</label>
</div>
<div class="input-field">
<textarea id="textareaInput">Textarea</textarea>
<label for="textareaInput">Textarea Input</label>
</div>
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm struggling placing my form elements where I like them to be.
I like my recurrence_interval input field below my select (recurrence) input field.
My two radio boxes for never and on. On top of each other and the input field for ends_on_date below the check box for "On".
My html is as below.
<div id="dialog" title="Create new appointment">
<form id="df">
<label class="align" for="title">Title</label>
<input type="text" name="title" id="title">
<label class="align" for="when">When</label>
<input type="text" name="when" id="when">
<input id="repeat" type="checkbox">
<label id="repeat_text" for="repeat">Repeat...</label>
<div id="repeat_properties">
<label class="align" for="recurrence">Repeats</label>
<select id="recurrence">
<option value="1">Daily</option>
<option value="7">Weekly</option>
<option value="repeat-x-days">Every x day</option>
</select>
<input id="recurrence_interval" type="text">
<label class="align" for="ends_never">Ends</label>
<input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked">
<label for="ends_never" title="Ends never">Never</label>
<input id="ends_on" name="endson" type="radio" title="Ends never">
<label for="ends_never" title="Ends never">On</label>
<input class="align" id="ends_on_date" type="text">
</div>
</form>
</div>
My css is as below.
.align {
display: inline-block;
float: left;
clear: left;
width: 30%;
text-align: left;
}
input[type="text"], input[type="radio"], select {
display: inline-block;
float: left;
clear: right;
}
#repeat
{
display: inline-block;
float: left;
text-align: left;
clear: left;
}
#repeat_text
{
float: left;
}
Anyone got a clue about how I can archive the above?
Edit: As seen here, at least with chrome, the fields are clearly out of place.
change your HTML structure for radio, try using this.
<label for="ends_never" title="Ends never"><input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked"> Never</label>
<label for="ends_never" title="Ends never"><input id="ends_on" name="endson" type="radio" title="Ends never"> On</label>
edited
try to add styling label { float : left; }
I'm learning some css and want to make a two column form, without any table tags and such.
This is what i have got (code from CSS Cookbook 3ed edition).
JSfiddle HERE...
HTML code:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
CSS code:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Because you float one div and not the other.
With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
See the updated fiddle.
Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
As stated by #Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...
Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).
h4 {margin: 0;}
You have to float all the div in your containter
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}
I'm building a criteria form using Bootstrap. Some of the form fields include checkbox or radio options, so I'd like to employ fieldset and the attendant legend to associate the options with their category.
Stop me if you've heard this before, but I'm having problems styling the form for IE7. Specifically:
The legend seems to cause a line-break, so
I can't seem to get the radio buttons (or checkboxes) to "stay" in the right column.
This image demonstrates the "bad" layout on the first line (in red boxes), and the layout I'm trying to achieve on the second line (in green boxes).
Let's go to the HTML:
<form name="form_search" id="form_search" action="acrq_results.html" method="post" class="form-horizontal">
<fieldset>
<legend>Regular legend not classed `.control-label`</legend>
<div id="div_search_type" class="control-group">
<fieldset>
<legend class="control-label">With fieldset and legend.control-label</legend>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</fieldset>
</div>
<div id="div_other_reason" class="control-group">
<label class="control-label">no fieldset or legend</label>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</div>
</fieldset>
</form>
I've added these CSS rules to complement what comes with Bootstrap (but it's not doing the trick):
legend.control-label, legend.control-label > span {
border-bottom: 0;
color: #000;
cursor: pointer;
display:inline-block;
float:left;
*display:inline;
*float:none;
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin-bottom: 5px;
}
I have packaged all of this together in a JSFiddle at http://jsfiddle.net/jhfrench/zTAHh/. Again, this issue is for IE7; it looks fine in Chrome.
Since you have tried
*display:inline;
*float:none;
Try positioning it to absolute.
HTML
<div id="div_search_type" class="control-group">
<fieldset class="group">
<legend class="control-label">With fieldset and legend.control-label</legend>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</fieldset>
</div>
CSS
legend.control-label {
position:absolute;
left:0;
}
fieldset.group{
padding-left: 200px; /*width of legend[160px] + space of 40px*/
position: relative;
}