I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is form-horizontal
<div class="checkbox">
<label class="checkbox-inline no_indent">I have read and agree with privacy and disclosure policy.
<input name="Terms" id="Terms" type="checkbox" ></label>
</div>
It's supposed to be like this with Bootstrap, <input> first and text after. http://jsfiddle.net/sqax02ah/
<div class="checkbox">
<label class="checkbox-inline no_indent">
<input name="Terms" id="Terms" type="checkbox">
I have read and agree with privacy and disclosure policy.
</label>
</div>
You can follow other answers if you do need the checkbox appears at the end.
In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
margin-right: -20px;
margin-left: 0;
}
Fiddle
Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;
Related
I'm having a hard time getting the labels on this form to line up beside the checkboxes. I'm using React with React-Hook-Form for validation and state management (here's the github: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js if that helps, the file with the form is called RFHHHForm.js).
I've tried a few things:
I tried using semantic ui's library like this:
<div className='inline field'>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
<label>Epilepsy</label>
</div>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
<label>Diabetes</label>
</div>
When I used this, the label and checkboxes line up, but for some reason the checkboxes become uneditable (can't be checked or unchecked).
I tried making my own css stylesheet module like this:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
But this didn't seem to work at lining anything up.
You can try to wrap the input inside the label
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
or with your checkbox class you can
.checkbox{
display: flex;
align-items: center;
}
let me know if it worked.
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!