I have searched for it. But unable to solve my problem.
I want the label element to grow till the end of the parent element so that when I get more space to select the radio. When I add display: inline-block; and width: 100%;, it goes in the next line.
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
}
.q-option:hover{
}
label{
display: inline-block;
/* width: 100%; */
background-color: blue;
}
<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>
You can use display: flex on the parent and simply ensure that your label grows and shrink as necessary to fill up the remaining space.
You can optionally add a gap property to ensure there is sufficient negative whitespace between the actual radio button and the label itself:
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
label {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}
<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>
Even better: wrap your <input> with <label> directly
However, what I'd suggest is you make the entire radio button wrapped by the label element: in that way you do not have to provide an id and for attribute:
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
input + span {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}
<label class="q-option">
<input type="radio" class="q-check" name="option" value="1">
<span>Preprocessor Home Page</span>
</label>
maybe this could be a solution with flex:
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
display: flex;
}
label{
background-color: blue;
flex: 1 0 auto;
}
Related
I have two text input boxes and a button in a row:
I want to make the height of the button same as text boxes.
This is the CSS code which I wrote:
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: 30px;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
HTML code:
return (
<div>
<form className="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
)
Even if I set the height of all the three elements as 30, the height of the button is not matching the text box.
Kindly comment if more information is needed.
You can add a display: flex to your form container and instead of putting the height on each input you could simply add height to the form element. display: flex will adjust the item's height automatically.
.form {
display: flex;
height: 30px;
}
.form-button {
background-color: purple;
color: white;
border: none;
color: white;
}
.form input[name="topText"] {
width: 100px;
}
.form input[name="bottomText"] {
width: 100px;
}
As <form .class="form"> </form> is parent container give a height to it. Then make height of its children 100%
html code:
<div>
<form className="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
css code:
.form{
height: 30px !important;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: 100% !important;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 100% !important;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 100% !important;
}
You can use display: flex;. This is what you wanted to do?
Example here: https://codepen.io/yasgo/pen/gOoqbBO
HTML
<form class="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<button class="form-button">Gen</button>
</form>
CSS
.form {
display: flex;
align-items: stretch;
height: 100px;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
}
Use display: flex; along with flex: 1;.
flex: 1; is a shorthand for:
flex-grow: 1; The div will grow in same proportion as the window-size
flex-shrink: 1; The div will shrink in same proportion as the window-size
flex-basis: 0; The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
Source for above: https://stackoverflow.com/a/37386525/14776809
This means all the child elements in the form's height will be set to the child element with the biggest height-value, in this case the input-elements.
form {
display: flex;
flex: 1;
}
.form-button {
background-color: purple;
color: white;
border: none;
color: white;
}
.form input[name="topText"] {
width: 100px;
}
.form input[name="bottomText"] {
width: 100px;
}
Hi so I have a few comments to make about this bit of code you've shared, I hope it will help you to improve :)
ALWAYS label your input for accessibility purposes and visually hide it if you don't want it to be displayed (Beware /!\ Visually hiding an element ≠ display:none)
Here an article you can read on w3c - Labeling Controls or Web Aim - invisible content
As another user point it out, you can achieve what you're trying to do with Flex Layout here is A Complete Guide to Flexbox on CSS-tricks
There is also an unnecessary <br /> in your code
in yourcssyou also have 2 x color lines fir the same element.
both your inputs have the exact same code, always respect the DRY method (Don't Repeat Yourself) here is an old but efficient article about 7 Important Tips for Writing Better CSS on FreeCodeCamp
Here you can see what I've achieved
form{
display:flex;
}
button {
background-color: purple;
border: none;
color: white;
height: 30px;
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
<form>
<label class="sr-only" for="topText">topText</label>
<input type="text" name="topText" placeholder="topText">
<label class="sr-only" for="bottomText">bottomText</label>
<input type="text" name="bottomText" placeholder="bottomText">
<button>Gen</button>
</form>
Add display:flex; and flex-wrap: wrap; to the parent class which is .form and avoid height css on inputs instead give paddings. Also avoid width unit in pixels instead add percentage and wrap it in a div which has width.
CSS
.form {
display: flex;
flex-wrap: wrap;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px; /*avoid width in pixels instead add percentage % unit*/
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px; /*avoid width in pixels instead add percentage % unit*/
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
JSX
return (
<div>
<form className="form">
<input
type="text"
name="topText"
value="{this.state.topText}"
placeholder="Top text"
onChange="{this.handleChange}"
/>
<input
type="text"
name="bottomText"
value="{this.state.bottomText}"
placeholder="Bottom text"
onChange="{this.handleChange}"
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
)
This can achieved without giving the form element a specific height and with 2 lines of css code only. Just give a display: flex; to .form and .form-button a height: inherit;.
(had to change 'className' to 'class' for html purpose in the snippet below)
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: inherit
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form {
display: flex;
}
<div>
<form class="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button class="form-button">Gen</button>
</form>
</div>
I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.
There is this spacing that appears that I cannot remove.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
<main>
<form class="deposit">
<button class="btndep">Deposit</button>
<input type="text" placeholder="0.00€">
</form>
</main>
there is a way around it; it seems... outline instead of border
Thanks to another user's question here I was able to strike through the text when the checkbox next to it is ticked, thanks to the following HTML and CSS:
<style>
/* Customize the label (the container) */
.container {
position: relative;
padding-left: 50px;
margin-bottom: 12px;
cursor: pointer;
color: #333;
font-size: 18px;
}
/* Hide the browser's default checkbox */
.container input {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #fff;
border: solid 2px #194263;
position: absolute;
left:0;
top:0;
margin-right: 10px;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 8px;
height: 14px;
border: solid #194263;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
margin-right: 10px;
}
/* strike through the text */
.container input:checked~.checkmark {
text-decoration: line-through
}
</style>
<label class="container">
<input type="checkbox">
<span class="checkmark"></span><br>
</label>
Now, I'd like to let a user add their own text, and still strike through it when the checkbox is ticked. Adding an input field within the span tag as follows does not work.
<label class="container">
<input type="checkbox">
<span class="checkmark"><input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item"></span><br>
</label>
Why does this not work? What to do instead?
Your code has the following issue. When you write these lines of css:
.container input:checked~.checkmark {
text-decoration: line-through
}
You're not adding the text-decoration: line-through css property to the text input element you want to strike, but to the checkmark instead. Therefore, the text input element is not receiving any strike-through styles.
What I did to solve your problem was adding the styles to the text input. I did this by doing some small changes to your HTML and CSS, this is the code:
/* Customize the label (the container) */
.container {
position: relative;
padding-left: 50px;
margin-bottom: 12px;
cursor: pointer;
color: #333;
font-size: 18px;
}
/* Hide the browser's default checkbox */
.container input[type="checkbox"] {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #fff;
border: solid 2px #194263;
position: absolute;
left:0;
top:0;
margin-right: 10px;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 8px;
height: 14px;
border: solid #194263;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
margin-right: 10px;
}
/* strike through the text */
.container input:checked ~ input {
text-decoration: line-through
}
<label class="container">
<input type="checkbox">
<input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item">
<span class="checkmark"></span>
<br>
</label>
And this is the result:
I'm trying to put an image next to the form. I tried using inline-block and float method, but all suggestions I tried just messed up the contents. How can I put the image on the left side of the form?
My code is below:
contactContainer {
display: block;
text-align: center;
border-radius: 2px;
background-color: #f2f2f2;
padding: 20px;
}
.contactContainer form {
display: inline-block;
margin: 30px auto;
text-align: left;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type=Text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=Submit] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type=Submit]:hover {
background-color: white;
color: gray;
}
.twoContainer{
display: flex;
}
.twoContainer img {
width: 500px;
}
<div class="twoContainer">
<img src="images/tour2.jpg" alt="contact image">
<div class="contactContainer">
<form action="https://formspree.io/lyndall#lyndallwalker.com" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe">
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder=" " style="height:200px"></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
Thank you in advance!
You need to add another div for the image but taking it out of
The contactContainer div. Then you'll wrap both of them (the image in a new div and the contact container div) in a third div (for example lets call it container). You want to remove the display properties that you have applied and you will give the container div this property
.container{
Display: flex;
}
If the image doesnt size ok you can try giving it a width of 50% and if not you can remove the img tag and apply it as an image background to the image Div.
.imagediv {
Width: 50%;
Background-image: url("yourimage.png");
}
Something like this should do it
You just need to set position: absolute to .contactContainer form and right:0 You can remove display: inline-block. It'll do the trick.
Here
HTML
<div class="twoContainer">
<img src="https://images.unsplash.com/photo-1581264296947-5a26af1aff18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="contact image" />
<div class="contactContainer">
<form
action="https://formspree.io/lyndall#lyndallwalker.com"
method="POST"
>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe" />
<label for="subject">Message</label>
<textarea
id="subject"
name="subject"
placeholder=" "
style="height: 200px"
></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit" />
</div>
</form>
</div>
</div>
CSS
.contactContainer form {
position: absolute;
right: 0;
margin: 30px auto;
text-align: left;
margin-left: auto;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type="Text"],
select,
textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type="Submit"] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type="Submit"]:hover {
background-color: white;
color: gray;
}
.twoContainer {
display: flex;
flex-direction: row;
}
I've been playing around with the CSS hack to use <label for="".. to control the toggle for a checkbox. Here's a codepen.
When I add another <input>, it disallows the toggle for the checkbox. (When I remove the hidden input everything works fine)..
Are my css selectors accommodating for this hidden input? I may be missing something simple.
.checkbox-on-off {
position: relative;
display: inline-block;
width: 35px;
padding-right: 2px;
overflow: hidden;
vertical-align: middle;
margin-top: 10px;
}
/* this positions the check box label over the text box */
.checkbox-on-off input[type=checkbox] {
position: absolute;
opacity: 0;
}
/* makes the background blue */
.checkbox-on-off input[type=checkbox]:checked+label {
background-color: #167ac6;
}
/* this is the grey background check mark */
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 15px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
/* this adds / positions the check mark */
.checkbox-on-off input[type=checkbox]:checked+label .checked {
display: inline-block;
margin-top: 3px;
margin-left: 6px;
background-size: auto;
width: 10px;
height: 10px;
}
/* if you click the checkbox, it sometimes has a grey square */
.checkbox-on-off label .checked {
display: none;
}
.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
display: none;
}
.checkbox-on-off label .unchecked {
display: inline-block;
float: right;
padding-right: 3px;
}
#autoplay-checkbox-label
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 13px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
/* this positions the white dot */
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
float: right;
}
/* this is the actual white dot */
.checkbox-on-off label .toggle {
float: left;
background: #fbfbfb;
height: 15px;
width: 13px;
border-radius: 20px;
}
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<input name="" type="hidden" value="false">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
The problem comes from this selector : input[type=checkbox]:checked+label
It means you are targetting label which is immediately after your input (element+element).
Problem is your hidden input is between checkbox and label.
Everything works if you place your hidden input :
before your checkbox,
after your label,
inside your label.
Live Demo with 3 hidden inputs
Update 1 :
In case you cannot modify HTML markup, you can move elements by jquery by adding $("input[type=hidden]").prependTo("#autoplay-checkbox");
This will move the hidden input before your checkbox
Updated exemple