On my website http://createabundance.ca, inside the payment form that is shown when any of the orange buttons are clicked, the text fields are not selectable on mobile safari or chrome, but work without issue on desktop safari, and chrome.
Screenshot: http://d.pr/i/nrBu
Any ideas as to what the issue might be?
You have form fields like this
<div class="form-row">
<div class="col-xs-12 form-group required">
<input name="email" class="form-control" size="4" placeholder="邮件地址" type="email">
</div>
</div>
remove col-xs-12 from <div class="col-xs-12 form-group required"> and put it in separate div <div class="col-xs-12"> like below
<div class="form-row">
<div class="col-xs-12">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
</div>
and it will fix the problem when form opens in mobile
sidenote: class="form-row" has no css property so totally remove this <div class="form-row"> because it severing no purpose
<div class="col-xs-12">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
but if you want to use <div class="form-row"> then
<div class="col-xs-12">
<div class="form-row">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
</div>
Related
I'm making a simple form with this code:
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
</div>
It looks like this:
You can see that the input does not align with the jumbotron, and that is because the input doesn't stop at the padding:
How do I fix this?
Here you go with the solution
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You should use col-* inside a div tag
Column classes should be given to the elements surrounding the input controls (and labels). The Bootstrap grid system works best as follows:
div.container > div.row > div.col-* > content
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You have added Bootstrap's predefined grid classes in input element. So, Grid classes padding apply in input element. You will need to create grid classes with separate div element. then put input element inside this div element.
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
also, Please check this official bootstrap Horizontal Form
You are missing the parent element for the form-group. Try this -
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
</div>
You need to remove the "row" class from the form-group. the row class basically remove the padding from the div element.
<div class="form-group">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
I want to have a inline bootstrap 4 form occupying the full width (without spaces between the inputs and the button) with:
1 input type text and 1 button In extra small devices
2 input type text and 1 buttons In small devices
3 input type text and 1 buttons In medium and larger devices
But it is not working with the code below. I dont know if it is because the place where the form opens and close. Here is the example:
https://jsfiddle.net/o8jzq00f/1/
Html:
<div class="container-fluid bg-success">
<div class="row no-gutters justify-content-center" style="background-color: orange">
<div class="col-xs-12">
<h1 class="m-3">Title</h1>
</div>
</div>
<div class="row no-gutters justify-content-center">
<form>
<div class="col-xs-10 col-sm-4 col-md-3">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-xs-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-md-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-xs-2 col-sm-4 col-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
Use row class to bind your column then it will work
<div class="row">...under this you can use col classes and specify the width ...</div>
What am I missing?
I can see the border of the container and it correctly shows the area that I have to work with.
However when I add the row (div) and offset(div) it is left justifying it.
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" class="form-control" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" class="form-control" />
</div>
</div>
</div>
</div>
I think I know what you are meaning, but I'm not sure. Do you mean like this?
If so, the class for that is:
class="text-center"
So you can change your code to this:
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" class="form-control text-center" type="text">
</div>
</div>
</div>
Or you can add it to just the controls you want, for example just the input form controls.
Hope that helps!
Bootstrap can provide a great mobile experience, but desktops can also benefit from its scaffolding capabilities. So, when I develop forms I like to use the least amount of space possible. With that in mind I have improved on Demonic Penguin's code and your, as well. Like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
<div class="form-group">
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
You can also embellish your form by adding icons to the fields, like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
</div>
For this implementation, you must add a FontAwesome CSS reference link to your page(s) that you can get from here: https://www.bootstrapcdn.com/fontawesome/
Just started learning Bootstrap and for example have designed this form like this, I want to know if those column numbers even make sense according to each other?
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</div>
</div>
</form>
See here the difference of what I explained in comments :
In your case, a more proper structure could be :
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</form>
</div>
</div>
And you have to add a .container or .container-fluid class around your .row
You can have .row as much as you wants in a single .container class.
See your code on a bootply fiddle
I was trying to embeds three different forms in a single horizontal row.
The first(shop), second(locality) and third(search) form element should occupy 50%,30% and 20% (6,4 and 2 bootstrap col unit) of total horizontal row.
In mobile view, each three form element should be adjust in individual row.
I tried following:
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-md-6">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-md-4">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
Is this the correct approach?
Should I use bootstrap inline form for this purpose?
I tried using inline form, but its difficult to set width of each form elements.
You are correct you just need to adjust for small screens with col-xs-12 & change md to sm.. xs is mobile...
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-sm-6 col-xs-12">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-sm-4 col-xs-12">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-sm-2 col-xs-12">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
You have to specify a small (col-sm-*) width for each one. Edit like another answer col-xs for extra-small screens.
<div class="col-md-6 col-sm-12">
<div class="col-md-4 col-sm-12">
<div class="col-md-2 col-sm-12">