HTML5 input date placeholder in Arabic browser (after changing the display language to be Arabic) is totally reversed and looks unacceptable
and this is the markup for each one:
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="col-lg-9 col-sm-9">
<input class="form-control" asp-for="#Model.EndDate" placeholder="mm-dd-yyyy"
autocomplete="off" type="date" id="endDate" max="2200-12-31">
</div>
<div class="col-lg-3 col-sm-3">
<label>إلى</label>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="col-lg-9 col-sm-9">
<input class="form-control" asp-for="#Model.StartDate" placeholder="mm-dd-yyyy"
autocomplete="off" type="date" max="2200-12-31" id="startDate">
</div>
<div class="col-lg-3 col-sm-3">
<label>من</label>
</div>
</div>
</div>
How to fix the revered placeholder text??
I succeeded to solve, by changing the control to be text and then applying bootstrap datepicker library on it , Just like in this demo:
https://jqueryui.com/resources/demos/datepicker/localization.html
$("#endDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);
$("#startDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);
<input class="form-control" lang="en-us" asp-for="#Model.EndDate" type="text" placeholder="شهر-يوم-سنة" autocomplete="off" id="endDate" max="2200-12-31">
<input class="form-control" lang="en-us" asp-for="#Model.StartDate" type="text" placeholder="mm-dd-yyyy" autocomplete="off" max="2200-12-31" id="startDate" value="">
Related
<form action="mailto:mail#mail.com" method="post" class="wow fadeInUp" data-wow-delay="0.6s">
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="Naam" name="name">
</div>
<div class="col-md-4 col-sm-6">
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control" placeholder="Onderwerp" name="subject">
</div>
<div class="col-md-12 col-sm-12">
<textarea class="form-control" placeholder="Bericht" rows="7" name"message"></textarea>
</div>
<div class="col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8">
<input type="submit" class="form-control" value="SHOOT MESSAGE">
</div>
</form>
The above code gives the underneath result when I 'shoot the message'.
It should fill in the message with the message from the form, same goes for the subject.
Now the question is: can this be done with HTML 5 only? I know that I can send it with PHP but that is not my question.
If you are able to use JavaScript, the following might come in handy:
Source: MailTo with HTML body
i want make my input field longer as the same 2 fields above him, look the picture please:
My HTML code:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-3">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
I failed to do it with the boostrap grid system alone.
I cant change to col-lg-3 is not work, look at the comments.
I had the same issue and I solved adding one of the col- classes in the input itself.
In your case, replace col-lg-3 for col-lg-6 in the div and add col-lg-6 in the input as well:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control col-lg-6" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this Code............
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this
<div class="row">
<div class="form-group col-lg-12">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Replace
col-lg-3
with
col-lg-6
in class attr
I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
I have two col divs in a row with each having two text filed while re-sizing in mobile the width of the textbox is not going to 100% and looking ugly.
Below is my bootstrap code, but in select filed the width is looks OK ..
here is the demo link see the 'Name' and 'Phone' field
http://www.responsinator.com/?url=webapplications.co.in%2Fdiamovitcarhire.com%2Fget-a-quote.html
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="col-md-6 col-sm-12 col-lg-6" >
<div class="form-group">
<label for="Name">Name </label>
<div class="input-group">
<input class="input-md form-control" name="Name" type="text">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label for="phone">Phone </label>
<div class="input-group">
<input class="input-md form-control" name="phone" type="text">
</div>
</div>
</div>
</div>
</div>
What you probably want is something like this:
<div class="container">
<div class="row">
<div class="col-md-6" >
<div class="form-group">
<label for="Name">Name </label>
<input class="form-control" name="Name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone </label>
<input class="form-control" name="phone" type="tel">
</div>
</div>
</div>
</div>
If you use that structure it should work like you described it.
Most likely you are using 'container' as your base. According to Bootstrap's site (search for 'container-fluid') the container-fluid class is the one setting div to full width of your viewport.
So I'm working in bootstrap for the first time and I'm making a form, like so:
<div class="input-group col-xs-2">
<label>Voornaam:</label>
<input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
<label>Achternaam:</label>
<input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
<label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
<div>
<div class="form-inline">
<div class="form-group col-xs-9">
<input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
</div>
<div class="form-group col-xs-3">
<input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
</div>
</div>
</div>
</div>
Now, I've got a problem with the indentation of the "form-inline" part. For some reason, it's more indented than the other parts of the form.
image of result: http://puu.sh/g874J/2579b314e4.png
Any idea why this is the case and how I can make it so that the indentation is the same for every part of the form?
Your col-xs-X class adds an extra padding to div.