I have a div with two labels, and two inputs, and I need two vertically align them without making two divs. I want to vertically align the inputs and labels in css so that they are on top of each other.
<div id="name">
<label for="Fname">First Name:</label>
<input type="text" name="Fname" id="Fname" placeholder="First Name" maxlength="15" required>
<label for="Lname">Last Name:</label>
<input type="text" name="Lname" id="Lname" placeholder="Last Name" maxlength="20" required>
</div>
I have tried vertical-align in css but that did not work.
can you help?
You can use Flexbox layout in your CSS file.
div {
display: flex;
flex-direction: column
}
Use flex and flex-col property in your html div
<div class="display: flex; flex-direction: column">
<label for="Lname">Last Name:</label>
<input
type="text"
name="Lname"
id="Lname"
placeholder="Last Name"
maxlength="20"
required
/>
</div>
Related
Currently when I have my window at full width my items appear like so:
When I make the window smaller the Submit button moves up.
How would I be able to set it to stay evenly centered?
Here is my code:
<form>
<div className="row">
<div className="col-sm-3">
<label>
Name:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Phone:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Email:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<input type="submit" value="Submit" />
</div>
</div>
</form>
This is in a react component that is why it's className.
either...
Flex Box and justify-content: space-between;
Css grids and grid-template-columns: repeat(4, 1fr);
Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local #media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?
<style>
#media (max-width: 768px){
.radio-inline{
display:block;
}
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div>
<asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE
TEXT"/>
<br />
<br />
<asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-lg-12">
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>
You need to remove the spaces, " ", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>
I have been trying to figure out how to make a custom field form that is responsive on Shopify.
<div class="one-whole">
<div class="one-half">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div class="one-half">
<label for="bride_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
</div>
That is the code and this is what I get.
I have tried doing whole and one-half and separating each input into its own div. The always seem to be left justified and now wrapping.
I would like Groom Name and Bride Name to be on the same line. But when on mobile to collapse.
This question is about css not liquid or shopify.
The classes your are looking for are documented here.
Try something like grid__item small--one-whole medium--one-half
I have two input elements on my page. I need to give margin between the two elements.
<input type="text" class="form-control" placeholder="Username">
<input type="password" class="form-control" placeholder="password">
I have created a class for assigning margin for the password input. I would like to know if there are better ways to do this? Perhaps by wrapping the two input tags with divs?
If you are using Bootstrap, the right way is to do this way:
<div class="form-group">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
If you are just interested in adding a space between them, here you go:
.space-right {
margin-right: 10px;
}
<input type="text" class="form-control space-right" placeholder="Username" />
<input type="password" class="form-control" placeholder="password" />
you can use this code:
.form-control {
margin:0 5px; // for left and right margin
margin:5px 0; // form top and bottom margin
}
Im using jQuery Mobile and I have a horizontal toggle set.
I would like to center it in the page, or I would like to stretch it so that it takes up 100% of the width.
Either would be good for what I am doing.
I have tried a lot of different approaches but none have worked so far.
Using jQuery Mobile v1.0
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" class="custom"/>
<label for="monday">Monday</label>
<input type="checkbox" name="tuesday" id="tuesday" class="custom" />
<label for="tuesday">Tuesday</label>
<input type="checkbox" name="wednesday" id="wednesday" class="custom" />
<label for="wednesday">Wednesday</label>
<input type="checkbox" name="thursday" id="thursday" class="custom" />
<label for="thursday">Thursday</label>
<input type="checkbox" name="friday" id="friday" class="custom" />
<label for="friday">Friday</label>
<input type="checkbox" name="saturday" id="saturday" class="custom" />
<label for="saturday">Saturday</label>
<input type="checkbox" name="sunday" id="sunday" class="custom" />
<label for="sunday">Sunday</label>
</fieldset>
I just had this same problem and I solved it by adding by putting the fieldset within a div which has text-align: center and then setting the display of the fieldset to inline.
E.g.
HTML
<div class="custom">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" />
<label for="monday">Monday</label>
...
</fieldset>
</div>
CSS
.custom {
text-align: center;
}
.custom fieldset {
display: inline;
}
Setting the display of the fieldset to inline may have some other effects, for example I noticed that the margins/padding changed slightly, but apart from that it did what I wanted.