I have problem with setting right order of inputs in the form on the mobile view using Bootstrap. I already asked similar question, and got some tips and have been told is easy. I tried many things and i just don't know how to get required result.
Take a look at the jsfiddle please.
https://jsfiddle.net/nitadesign/y79LwL9x/8/
I want input with placeholder (17 - Error Text Area) to be on the top of the (20 - Button).
Visual graph:
And HTML
<div class="row">
<div class="col-md-3">
<input name="textinput" type="text" placeholder="1" class="form-control" />
<input name="textinput" type="text" placeholder="2" class="form-control" />
<input name="textinput" type="text" placeholder="3" class="form-control" />
<input name="textinput" type="text" placeholder="4" class="form-control" />
<input name="textinput" type="text" placeholder="5" class="form-control" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<input name="textinput" type="text" placeholder="6" class="form-control" />
<input name="textinput" type="text" placeholder="7" class="form-control" />
<input name="textinput" type="text" placeholder="8" class="form-control" />
<input name="textinput" type="text" placeholder="9" class="form-control" />
</div>
<div class="col-md-6">
<input name="textinput" type="text" placeholder="10" class="form-control" />
<input name="textinput" type="text" placeholder="11" class="form-control" />
<input name="textinput" type="text" placeholder="12" class="form-control" />
<input name="textinput" type="text" placeholder="13" class="form-control" />
</div>
</div>
</div>
<div class="col-md-3">
<input name="textinput" type="text" placeholder="14" class="form-control" />
<input name="textinput" type="text" placeholder="15" class="form-control" />
<input name="textinput" type="text" placeholder="16" class="form-control" />
<input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<input name="textinput" type="text" placeholder="18" class="form-control" />
</div>
<div class="col-md-4">
<input name="textinput" type="text" placeholder="19" class="form-control" />
</div>
<div class="col-md-4">
<input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
</div>
</div>
</div>
</div>
...got some tips and have been told is easy.
I'm with you, it wasn't that easy. If it was that easy you would've gotten an answer that works.
SOLUTION
You can use flexbox on inputs 17 to 20 and use the flexbox property order.
.flex { display: flex; flex-direction: column; }
.flex1 { order:3; }
.flex2 { order:1; }
.flex3 { order:2; }
.flex4 { order:4; }
#media screen and (min-width:1000px) {
.flex { display: inline; }
}
These rulesets basically are saying:
The 4 designated flex items (children of a flex container, i.e. .flex1, .flex2, .flex3, .flex4) will be reordered as:
3rd is now 1st,
1st is now 2nd,
and 2nd is now 3rd
When the viewport is wider than 1000px, the flex container (i.e. .flex) will be a harmless inline element.
In order to make the styles work without disrupting the layout, there had to be some changes to the HTML:
Wrapped <span class='flex'> around inputs 17 to 20.
Assigned classes .flex1, .flex2, .flex3, .flex4 to inputs 17 to 20.
The last 3 divs classes changed from .col-md-4 to .col-md-3.
Removed .col-md-9 and .row that was wrapped around inputs 18 to 20.
Moved input 17 inside .flex and wrapped a <div class='col-md-3'> around it.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.flex {
display: flex;
flex-direction: column;
}
.flex1 {
order: 3;
}
.flex2 {
order: 1;
}
.flex3 {
order: 2;
}
.flex4 {
order: 4;
}
#media screen and (min-width: 1000px) {
.flex {
display: inline;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3">
<input name="textinput" type="text" placeholder="1" class="form-control" />
<input name="textinput" type="text" placeholder="2" class="form-control" />
<input name="textinput" type="text" placeholder="3" class="form-control" />
<input name="textinput" type="text" placeholder="4" class="form-control" />
<input name="textinput" type="text" placeholder="5" class="form-control" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<input name="textinput" type="text" placeholder="6" class="form-control" />
<input name="textinput" type="text" placeholder="7" class="form-control" />
<input name="textinput" type="text" placeholder="8" class="form-control" />
<input name="textinput" type="text" placeholder="9" class="form-control" />
</div>
<div class="col-md-6">
<input name="textinput" type="text" placeholder="10" class="form-control" />
<input name="textinput" type="text" placeholder="11" class="form-control" />
<input name="textinput" type="text" placeholder="12" class="form-control" />
<input name="textinput" type="text" placeholder="13" class="form-control" />
</div>
</div>
</div>
<div class="col-md-3">
<input name="textinput" type="text" placeholder="14" class="form-control" />
<input name="textinput" type="text" placeholder="15" class="form-control" />
<input name="textinput" type="text" placeholder="16" class="form-control" />
</div>
<span class='flex'>
<div class="col-md-3 flex1">
<input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
</div>
<div class="col-md-3 flex2">
<input name="textinput" type="text" placeholder="18" class="form-control" />
</div>
<div class="col-md-3 flex3">
<input name="textinput" type="text" placeholder="19" class="form-control" />
</div>
<div class="col-md-3 flex4">
<input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Related
How do I change the position of this form, with an absolute position?
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
you can add a css selector by selecting the form id of contact_form and adding a rule for positon
<style>
#contact_form {
position: absolute;
}
</style>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
Hi I've had a look all around google and SO cant seem to find a solution for this.
What i'm trying to do is align an input-group with all my other form-groups. Every time i use an input-group it adds like a padding to it.
I've tried almost every answer I've found on here:
padding:0px !important;
margin:0px !important;
float: left !important;
Nothing seems to work!
Code:
<div class="col-md-6">
<div class="form-group">
<input id="est_mileage" name="est_mileage" type="text" placeholder="Estimated Mileage" autocomplete="off" class="form-control input-md"/>
</div>
<!--Padding Issue is Here-->
<div class="input-group" style="padding:0px !important; margin:0px !important; float:left; width:100%;">
<span class="input-group-addon" style="width: 45px;">
<input value="1" type="checkbox" id="combinedSelector" name="one_off" />
</span>
<input id="acc_mileage" name="acc_mileage" type="text" placeholder="Actual Mileage" autocomplete="off" class="form-control"/>
</div>
<!--End Issue-->
<div class="form-group">
<input id="fuel" name="fuel" type="text" placeholder="Fuel(ltrs)" autocomplete="off" class="form-control input-md"/>
</div>
<div class="form-group">
<input id="price" name="price" type="text" placeholder="Price" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="cwt_dwt" name="cwt_dwt" type="text" placeholder="CWT & DWT" autocomplete="off" class="form-control input-md" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="def_ser_num" name="def_ser_num" type="text" placeholder="Defect Serial Number" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input required id="product_volume" name="product_volume" type="text" placeholder="Product Volume" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="ref_po" name="ref_po" type="text" placeholder="Ref/PO" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="comments" name="comments" type="text" placeholder="Job Specifics" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="billing_com" name="billing_com" type="text" placeholder="Billing Info" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="iss_rep" name="iss_rep" type="text" placeholder="Issues/Repairs" autocomplete="off" class="form-control input-md" />
</div>
</div>
This form is nested in a collapse div and is in a modal view.
This is the result:
You have to add the class form-group to div with input-group class and remove the styles: padding:0px !important; margin:0px !important; float:left;
and this will make it similar to the other form groups
See Demo Here
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
The total number of columns on a row is equal to 12.
You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that.
A solution would be to set a class with fewer column on your first form-group, let's say col-md-3. Here's a demo: http://output.jsbin.com/tipusi/1/
<!-- HTML -->
<div class="row">
<div class="form-group col-md-12">
<div class="inline-block">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="inline-block">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
</div>
<!-- CSS-->
.inline-block {display: inline-block;}
<div class="row">
<div class="form-group col-md-5 no-padding">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4 no-padding">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
Add below css class
.less-padding {
padding: 10px !important;
margin: 10px !important;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
I'm not sure how to go about getting the effect I want here. I have two input boxes that are on the same line and I want to have labels underneath them and aligned to match the respective input box.
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
= <label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</div>
</div>
</form>
Take a look at the jsfiddle here for more info:
http://jsfiddle.net/justinhj/bTVKZ/2/
http://jsfiddle.net/isherwood/bTVKZ/6
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="pull-left">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<br />
<label for="decimal_input">Label 1</label>
</div>
<div>
<input type="text" value="I" width="30" id="input2" class="form-control" />
<br />
<label for="input2">Label 2</label>
</div>
</div>
</form>
</div>
Your new HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<span class="inner-container">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
</span>
=
<span class="inner-container">
<label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</span>
</div>
</div>
</form>
</diV>
Your new CSS (of course I would add a class to the labels):
.container {
margin-top: 10px;
}
.inner-container {
position: relative;
}
label {
top: 25px;
left: 5px;
position: absolute;
}
here's the fiddle
You may try this
Extra CSS:
label {
display:block;
}
.form-group {
display:inline-block;
}
Modified HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<label for="decimal_input">Label 1</label>
</div>
<div class="form-group">
<input type="text" value="I" width="30" id="input2" class="form-control" />
<label for="input2">Label 2</label>
</div>
</form>
</div>
DEMO.