I am trying to remove the flex property on the last child, I want the button to be below the form fields. Any ideas?
.formbody {
display: flex;
}
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="">
<input type="hidden" name="" value="">
<div class="widget widget-text mandatory">
<label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
<input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
</div>
<div class="widget widget-text mandatory">
<label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
<input type="email" name="email" id="" class="text mandatory" value="" required="">
</div>
<button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>
Taken from this answer for a similiar request and slightly adapted, you can use break-before (or page-break-before) to achieve what you want. You'll also have to set flex-wrap: wrap on the parent element for it to work. There are some other approaches mentioned in that answer that you could adapt to your needs.
.formbody {
display: flex;
flex-wrap: wrap;
}
.formbody :last-child {
page-break-before: always; /* CSS 2.1 syntax */
break-before: always; /* New syntax */
}
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="">
<input type="hidden" name="" value="">
<div class="widget widget-text mandatory">
<label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span>
</label>
<input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
</div>
<div class="widget widget-text mandatory">
<label for="" class="mandatory">E-Mail<span class="mandatory">*</span>
</label>
<input type="email" name="email" id="" class="text mandatory" value="" required="">
</div>
<button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>
Put the button outside the div.
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="">
<input type="hidden" name="" value="">
<div class="widget widget-text mandatory">
<label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
<input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
</div>
<div class="widget widget-text mandatory">
<label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
<input type="email" name="email" id="" class="text mandatory" value="" required="">
</div>
</div>
<button type="submit" id="" class="submit" name="submit">Weiter</button>
Related
I have this form:
I want the last name input to be on the same line as the first name. I used float-left for both of them but it doesn't work.
.first-name {
float: left;
margin-right: 20px;
}
.last-name {
float: left;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section>
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
Use flexbox to solve this.
section.justify-content-btw {
display: flex;
justify-content: space-between;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section class="justify-content-btw">
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
There's a weird issue that I had popped into a few days ago, but still cannot find a suitable solution as to how best to go about fixing it. I am currently creating a website where-in I need a certain date-picker to be used (Materalize Date-Picker).
https://codepen.io/Shadow1209/pen/oWvxav
//HTML
<div class="col-md-5 horizontal">
<div class="">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class=" col-md-5 horizontal">
<div class=" ">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
//CSS
.horizontal
{
display:inline-block;
}
//JS
.horizontal
{
display:inline-block;
}
There you can find an example of code that I just quickly arranged to display the "normal" way that the date-picker is supposed to work; basically once the start-date or end-date is clicked on, the pop-up takes over the viewport and centers itself there.
However, once I added animations to the project by means of Animate-it in order to include scrolling animations, issues arose, where the date-picker would suddenly no longer cover the viewport, but rather just the section (form) itself, as can be seen here:
(To add animations, I added the animatedParent and animateOnce classes to the outer container, and the animated fadeInDown classes to the inner containers, as described by the code-creator)
https://codepen.io/Shadow1209/pen/QvLEEB
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
I have even tried changing from Animate-It to Wow Animations, but the problem stayed the same.
While investigating the code, I found out that, should I remove the classes 'animated', 'fadeInDown', and the newly automatically added 'go' class, the issue goes away. This in turn made me think that maybe a way to work around the issue would be to create an on click event that removes the classes from the parent container once a date-selector field has been clicked on, however this does not really seem like a solution to the issue and more of a work-around.
My question would be, "Is there a good way to go about fixing the issue rather than having to resort to creating a work-around?"
Thank you for any help.
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..
I'm using html and jquery mobile.here is the code:
<div data-role = "content">
<form action = "?" method="post" name="form" id = "form">
<fieldset>
<div data-role = "fieldcontain" class = "ui-hide-label">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="" placeholder="Address"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
<label for="radio-choice-1">Male</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" />
<label for="radio-choice-2">Female</label>
</fieldset>
</div>
<div data-role="fieldcontain" data-type="horizontal">
<label for="select-choice-0"></label>
<select name="select" id="select">
<option value="politrauma">Politrauma</option>
<option value="cardiologico">Cardiologico</option>
<option value="neurologico">Neurologico</option>
</select>
</div>
</fieldset>
</form>
</div>
I'm not able to put in the same line two input text. I tried block grid but it didn't work
You should look at two column layout in jquerymobile:
jquerymobile.com/demos/1.0.1/docs/content/content-grids.html
Your code should be something like this:
<form action = "./includes/user_form.php" method="post" id = "form">
<div class="ui-grid-a">
<div data-role = "fieldcontain" class = "ui-hide-label ui-block-a">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label ui-block-b">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
</div>
</form>
I know this question is kind of old but I just had the same problem and this is what worked for me:
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="" name="" value="">
</div>
<div class="ui-block-b">
<input type="text" id="" name="" value="">
</div>
You can even add some style to change the relative size of the field.
Just add floats to the divs:
<form action = "./includes/user_form.php" method="post" id = "form">
<div data-role = "fieldcontain" class = "ui-hide-label" style="float:left">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label" style="float:left">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
</form>
I'm using <span> wrapper around input with class that overrides display attribute of nested <div> (generated by jquery mobile). Also you must explicitly set width of input.
Example http://jsfiddle.net/FabyD/
CSS:
.inlineinput div {
display: inline;
}
HTML:
<div>
some text
<span class="inlineinput">
<input type='text' style='display: inline; width: 50px;' />
</span>
some text
<span class="inlineinput">
<input type='text' style='display: inline; width: 50px;' />
</span>
some text
</div>
DIVs are block elements - by default they take up 100% width. This makes the following elements appear on "the next line".
So, you need to move the second set on elements into the same DIV as the first (or re-style your DIVs with a fixed-width and use floats, but that's a little more challenging)
Another tip is checking out the data-type="horizontal" -type (no pun intended).
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<div data-role="fieldcontain">
<label for="textinput11">
Something:
</label>
<input name="something" id="textinput11" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textinput12">
Something else:
</label>
<input name="something_else" id="textinput12" placeholder="" value="" type="text">
</div>
</fieldset>