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);}.
Related
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.
Looking the w3Schools Bootstrap's Input Groups examples there are Input Groups Labels that seems that wrap the input box
(here).
Is there any way to do this for checkbox too?
EDIT
The labels have to be inside that grey box attached to the input box (textbox in example case, checkbox in the case i want)
They don't wrap the input field since the closing tag comes right after the opening tag, but you can use label on a checkbox as well as described here in the offical bootsrap docs for forms:
Is it something like this you had in mind?
<div class="container mt-3">
<h2>Checkbox Group Labels</h2>
<form>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<div class="input-group mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
</div>
</div>
</form>
</div>
I'm trying to do something exactly like this sign up form here. They have appended their domain name as undeletable value to allow user to create a sub domain folder. I want to do the same with following input:
<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/>
I found a technique here but I'm not looking to append a prefix. The value must be after like in the example.
It is just a styling trick. input are either completely editable or disabled (not editable at all). There is no way to get around this.
What is done in the form you linked to is a trick where the "frozen" text is placed upon the input field so it looks as if it is a part of the actual input tag, but it is not.
Se my simple jsfiddle illustration. Look at how the styling can be used to create the illusion you want.
Here is an example using Bootstrap 3:
Bootstrap 3 Sub-domain input
<div class="container">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Your sub-domaion here">
<span class="input-group-addon" title="Type of Question">.our-domain.com</span>
</div>
</div>
</div>
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