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>
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.
I have discovered what appears to be a very odd behaviour in Safari and I cannot figure out what is going on.
My layout as viewed in Chrome:
But when viewed in Safari I get the following:
For some bizarre reason the <small class="text-muted">(required)</small> portion of my HTML has been dropped to a new line.
Even more bizarrely, if I just change one letter in the word 'City', the layout becomes correct.
The same portion of my form but I have literally changed one thing and that is that I've changed the word 'City' to instead say 'Sity':
In fact, I seem to be able to use any word instead of 'City', but when I use the word 'City', the label suddenly takes up 2 lines. So, in light of this, there is an easy fix which is to just use the word 'Town' instead of the word 'City' but I would still like to know if this is just a really strange bug or if I'm missing something.
What on earth is going on here?
I was unable to recreate this issue in stack overflow's code snippet tool.
I am using Bootstrap 4 and the portion of HTML that I'm looking at is as follows:
<div class="form-row">
<div class="form-group needs-validation col-sm-6 col-md-6">
<label for="inputCity">City <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputCity" name="city" required>
<div class="invalid-feedback">
Please provide your city.
</div>
</div>
<div class="form-group needs-validation col-sm-6 col-md-4">
<label for="inputState">State <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputState" name="state" required
autocomplete="address-level1">
<div class="invalid-feedback">
Please provide your state.
</div>
</div>
<div class="form-group needs-validation col-5 col-sm-4 col-md-2">
<label for="inputZip">Zip <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputZip" name="zip" required>
<div class="invalid-feedback">
Please provide your zip code.
</div>
</div>
</div>
EDIT Responding to Comments
#Rdg Replacing the space with does indeed fix the layout. But why does this only occur when followed by the word 'City' and nothing else (granted I haven't tested every word in the English language, so could it be something to do with the exact width of the word 'City'?)
#Geuis Yes I have finally managed to recreate this in codepen, it seems to be an issue with the font I am using ("Raleway") and the exact width of the word "City". https://codepen.io/Redtama/pen/RdRpqX
#Richard Uie I'm not sure what you mean by substitute the HTML entity for uppercase "c," i.e., C, but with regards to the wrapping being caused by width, I can replace the word 'City' with something much longer and no wrapping takes place.
Example with Longer Label Text
I would recommend adding the following to your css forcing the text to become an inline element:
.text-muted {
display: inline-block;
}
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 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
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)