I've noticed on the most recent iOS update (iOS 16), all browsers display date inputs with no regard for normal width or height constraints. The code below is used to generate the first two inputs in my form. On previous iOS versions, the Date field would display full width on its own line (in the same way as the Pilot in Command field. However, after the update, it now displays inline and only as wide/tall as the value requires.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" id="labelDate">Date: <span style="color: red;">*</span></label>
<input type="date" class="form-control" id="flightDate" value=<?php echo $preloadDate; ?>>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" id="labelPIC">Pilot in Command: <span style="color: red;">*</span></label>
<input type="text" class="form-control" id="flightPIC" placeholder="Self">
</div>
</div>
On any other operating system, this produces the expected result, however on iOS 16, it produces this:
If I change the type of input to text, it displays normally.
I know that I can set a min-width: 95% on the date input to force it's width, but I was wondering if anyone has a more elegant solution rather than a work around like this.
Related
When I use the following code, the date input fields are cut off and overlapped by the native HTML date picker:
<div class="form-check form-check-inline">
<div class="input-group ml-2">
<div class="input-group-prepend">
<label class="input-group-text" for="date_from">von</label>
</div>
<input th:placeholder="#{date.format}" th:field="*{from}" type="date" max="9999-12-31" min="1000-01-01"
class="form-control" id="date_from">
</div>
<div class="input-group ml-2">
<div class="input-group-prepend">
<label class="input-group-text" for="date_to">bis</label>
</div>
<input th:placeholder="#{date.format}" th:field="*{to}" type="date" max="9999-12-31" min="1000-01-01"
class="form-control" id="date_to">
</div>
</div>
This is how it looks like in the browser:
When hovering over the input, one can clearly see that it's the native HTML date picker that overlaps the input fields:
So my question is: How can I solve this problem?
You could use one of two options:
Specify the width of the input box to a value that allows the whole date to be clearly visible.style="width:(insert value here)"
Specify a smaller font-size, this will also allow the date to be seen clearly. style="font-size:(insert value here)"
I deal with this everyday using the two steps Alex Morrison explained combined, also, don't forget that you can do both steps multiple times in different media queries to make it more responsive.
Instead of having to manually add the width every time you have a date input, you could either create a custom class, or target each date in css and do something along the lines of input[type=date]{width:(your width here);}.
I'm quite new here. In this simple bootstrap site, I have an input field with a label in front of it. It looks fine in my browser with default value 1.00, and it's responsive when I resize my browser. However that input filed becomes very small when I accessed the site through some other people's computers. The default value also disappeared. Is there anything wrong with how I defined this field? Many thanks in advance!
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Amount</span>
<input class="form-control" type="text" id="amount" aria-describedby="sizing-addon1" value="1.00">
</div>
</div>
I have bootstrap columns that has two labels and two inputs From and To, So From input is showing text correct but To input is not showing complete text when i load data dynamically.How can i fix this issue using bootstrap or I have to use css helper class to make it work.
when we use low resolution monitors problems occurs most of the time e.g 1366 x 768
main.html
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="issueFromDate" class="col-md-5">Issue Date
Range:</label>
<div class="col-md-7">
<div class="row">
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueFromDate"
name="issueFromDate" id="issueFromDate" disabled />
</div>
<div class="col-md-1">
<label class="control-label padd15"> To:</label>
</div>
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueToDate" name="issueToDate"
id="issueToDate" disabled />
</div>
</div>
</div>
</div>
</div>
I suggest you read more into the bootstrap grid system. You could use a mix of the different col- classes in order to make sure everything fits on the screen depending on the resolution. See this example:
Zoom and unzoom to see the grid system in action
Also, a date field always contains a maximum amount of characters. Therefore, you could set a min-width to the input
I am trying to create an html view that shows three form fields that together collect a United States format phone number in the format (xxx) xxx-xxxx .
How can I write the css to make this happen in an app that uses css3, bootstrap, and html5 along with AngularJS?
My current attempt gets the three input field sizes correctly, but completely messes up the placement of the parens ( and ) and also messes up the placement of the dash -. The parens and dashes are placed almost all over the screen, in that they are almost in different rows, with little or no correlation to the placement of the input fields. What specific changes need to be made to the code below in order to print out the input fields in the format (xxx) xxx-xxx, given css3, html5, bootstrap, and AngularJS?
<div class="row">
<div class="col-sm-1">
(<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="3" size="3" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.onlyNumbers" required />)
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum2" name="phonenum2" maxlength="3" size="3" ng-model="auth.resultphone.phonenum2" ng-pattern="auth.onlyNumbers" required />-
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum3" name="phonenum3" maxlength="4" size="4" ng-model="auth.resultphone.phonenum3" ng-pattern="auth.onlyNumbers" required />
</div>
</div>
Here is a print screen of what the above code is currently printing in the view:
By contrast, the correct output would put all three fields on the same line within the proper punctuation in the pattern (phonenum1) phonenum2-phonenum3
ONGOING EFFORTS:
Also, if I take #Pauli_D's advice and deviate from the OP by using the RegEx \d{3}[\-]\d{3}[\-]\d{4}, the AngularJS form validation is only partially effective. For example, typing ANYTHING into the phonenum1 input in the code below results in the view displaying the Please enter a phone number in the format 111-222-3333 warning, but the warning DOES NOT GO AWAY when you type in a number in the format 111-222-3333. Here is the code in the view for trying #Paulie_D's suggestion:
<form name="confirmForm" ng-submit="auth.confForm(confirmForm.$valid)" novalidate>
<div class="form-group">
<div class="row">
<label for="auth.resultphone.phonenum1">Cell Phone number:</label>
</div>
<div class="row">
<div class="col-sm-3">
<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="12" size="12" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.usPhone" required />
</div>
</div>
<div class="row">
<p ng-show="confirmForm.phonenum1.$error.required && !confirmForm.phonenum1.$pristine" class="help-block">Area code of cell phone number is required.</p>
<p ng-show="!confirmForm.phonenum1.$valid && !confirmForm.phonenum1.$pristine" class="help-block">Phone number must be in the format 111-222-3333.</p>
<button type="submit" class="btn btn-primary" ng-disabled="confirmForm.$invalid" >Submit</button>
</div>
</div>
</form>
And here is the variable declaration in the service auth.js:
this.usPhone = "\d{3}[\-]\d{3}[\-]\d{4}";
The revised AngularJS code with #PaulieD gives the following print screen. Note that the Submit button is still shaded, so that the form cannot yet be submitted:
So what other changes need to be made?
As for the css alignment issue...
.col-sm-1 {
padding-right: 0;
}
input[size='3'] {
width: 75%;
min-width: 75%;
padding: 0;
display: inline;
}
http://codepen.io/anon/pen/adPrey
I'm developing a web site where users can search for customers. Part of the search allows them to filter by country, state or city. In order to balance flexibility for those on big devices and a neat UI for those on small devices, I've added four input controls, one each for country, state and region, all to be shown on big devices, and one combined control for location to be shown in small devices.
This is all using the standard stuff that comes when you start a new MVC project in Visual Studio 2013. The HTML looks like this...
<div class="form-inline form-group" id="filterGroup">
<span style="white-space: nowrap"><label for="namefilter">Name:</label> <input id="namefilter" type="text" class="form-control k-input k-textbox" /></span>
<span style="white-space: nowrap"><label for="locationfilter" class="visible-xs">Location:</label> <input id="locationfilter" type="text" class="form-control k-input k-textbox visible-xs" /></span>
<span style="white-space: nowrap"><label for="countryfilter" class="hidden-xs">Country:</label> <input id="countryfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="regionfilter" class="hidden-xs">State:</label> <input id="regionfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="cityfilter" class="hidden-xs">City:</label> <input id="cityfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><button id="filterBtn" class="btn btn-primary btn-sm">Filter</button> <button id="clearBtn" class="btn btn-primary btn-sm">Clear</button></span>
</div>
Now when you view this on a big device, it looks fine...
(Note that the HTML appears inside the toolbar section of a KendoUI grid, but that's not relevant to the problem, as the issue is exactly the same if I place it directly in the body of the document)
However, if you view it on a small device (or just make the browser window narrow), it looks poor...
The location textbox is on a separate line from the label, which it shouldn't be, as they are both wrapped in a span with white-space set to nowrap, there is a large margin above the location textbox, and the two buttons are pushed down onto yet another line. All of this should fit on one line, but instead looks ugly and takes up far too much space.
Any ideas what I did wrong? I want the name and location controls on one line, preferably with the buttons as well.
If you want proper responsive layout using BootStrap3, you should use the 12-grid system.
In your form, use the <div class="row"> and <div class="col-md-2"> (or whatever size suits you) in order to properly format it.
More specific to forms, you have an example of a properly formatted one here http://getbootstrap.com/css/#forms-horizontal
More info here: http://getbootstrap.com/css/#grid