How can i put that checkbox inline with the text?
The html code is:
<div class="checkbox checkbox_allow_div"><label class="label_300"><input type="checkbox" name="allow" value="1" class="allow_checkbox"><?php echo gdpr_text('gdpr_order_text'); ?></label></div>
The text, that i echo with php, its comeing from sql table, and its writed in a ckeditor on the admin page. Ckeditor put the text automatically in <p> tags.
I cant put the checkbox code into that texts html code, bacause the user is writing the text on the admin page, so its always dynamic.
First, make sure that the checkbox is not defined as a block with:
.checkbox_allow_div {
display: inline-block'
}
then, you can style the label that is around the checkbox and the text's p tag with:
label {
display: flex;
justify-content: space-evenly;
align-items: center;
}
More information on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add display:inline-block for input and paragraph.
.checkbox input,
.checkbox p {
display: inline-block
}
<div class="checkbox checkbox_allow_div">
<label class="label_300">
<input type="checkbox" name="allow" value="1" class="allow_checkbox">
<p>Random Text</p>
</label>
</div>
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 2 years ago.
I want to offer a selection by radio buttons. Upon hovering over the label for the button, I want there to appear an explanation for that option.
I can achieve this by putting the explanation text into a span-element, but not in a p-element...and I fail to understand the difference:
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<p class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</p>
</div>
</fieldset>
with the style sheet
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
The text in the p-element is hidden by "display:none", but it does not appear upon hovering over the text in the label-element.
If I change the p-element into a span-element, the text is also hidden by "display:none", but it does appear upon hovering over the text in the label-element.
I think that the different behavior might be the result of nesting a p-element within a p-element...but even so I don't quite understand why it is "partially working", as I would call it.
You should use div as a row element:
<div class="row">
The reason why nested p tags does not work in your code is that it is not valid HTML. It is corrected by the browser. So the sibling of label is no longer p then.
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<div class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</div>
</div>
</fieldset>
I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
And I'm setting display to be inline-block for terms-checkbox like so:
.terms-checkbox {
display: inline-block;
}
However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?
Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/
edit: fixed indentation.
You must set the terms-checkbox class to input or p tag. Not their parent.
Means your input and p tag must be inline-block
<p><input type="checkbox" required/>I accept the Terms and Conditions</p>
I have to create a navigation menu using HTML and CSS without Javascript for my eBay store. What I want to do is to create many radio buttons with many labels and clicking on a label make label bold and make appear a text.
First effect on JSFiddle: https://jsfiddle.net/fb2yn5ts/
(click on label make a text appears)
My Label
<div id="descrizione">
This is some text
</div>
css
#descrizione{
display: none;
}
#descrizione:target{
display: block;
}
Second effect on JSFiddle: https://jsfiddle.net/cv83q9ow/
(Click on label make label bold)
<div>
<input type="radio" id="check" class="check-with-label" />
<label for="check" class="label-for-check">My Label</label>
<div>
css:
.check-with-label:checked + .label-for-check {
font-weight: bold;
}
I can't merge these effects into one, do you know why and how can I solve this?
Thank you very very much!
OK guys I solved this problem by doing this:
HTML:
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>
<div id="contentDescription"><p class="testo_scheda">
This is some text</p>
</div>
<div id="contentShipping"><p class="testo_scheda">
This is some other text</p>
</div>
css:
#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}
Preview: https://jsfiddle.net/LLornfn8/
Thank you very much anyway!
span{
text-align: justify;
}
<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>
I want to align the label for excessive reinforcement checkbox like image2
For example
Thanks in advance
First of all use <label> instead of <span>.
If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.
label{
text-align: justify;
float: left;
line-height: 20px;
}
input{
float:left;
}
<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>
Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.
If you can change the HTML
The best and new method to use checkbox is
<label><input type="checkbox" name="type">Excessive Reinforcement</label>
span {
text-align: justify;
}
.make-table {
display: table-cell;
/* make it behave like table-cell. so that they fall beside each other. */
}
<div class="any-class">
<label><span class="make-table"><input type="checkbox" name="type"></span>
<span class="make-table">Excessive<br> Reinforcement</span>
</label>
</div>
<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
<br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>
Make this simple change!
This is one way of doing it:
<label for="type-1">
<input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>
When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.
I generate the following HTML with Django:
<p>
<label for="id_username">
Username:
</label>
<input id="id_username" type="text" name="username" maxlength="30"></input>
</p>
... and use the following CSS code to try to decorate labels and text inputs:
form.registration p label,
form.registration p input
{
width: 250px;
}
In the end, the navigator (Firefox) only changes the width of the input text boxes, but not the one of the labels. Does anybody know why?
Generally, the default display for label in most browsers is display: inline. This means that a set width will not effect any changes. Add display: inline-block to the properties (this won't affect the <input>, which are already display: inline-block)