I have a simple form, with simple text inputs something like this:
<form>
<input type="text" name="name"/>
<input type="text" name="number"/>
<textarea name="comments"></textarea>
</form>
Now when I go to the site on an iPhone, when I click into one of the text boxes it doesn't do anything at all.
However when i click on the text area it lets me start typing. So the textarea is working but not the type text input fields.
Yes this does work on a desktop PC.
I don't know why this isn't working?
Your div col-lg-6 col-md-6 (Section 2) is overriding(not the technical term but oh well..), your div col-lg-6 col-md-6 (Section 1). If you give your Section 1 div a height of 450px, you should be able to work from there.
so:
<div class="col-lg-6 col-md-6" style="font-size:1.2em;height: 450px;"><!-- THIS IS THE 1st section -->.....
You should be able to type in your textboxes.
Related
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;
}
<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
I'm using a Bootstrap 4 theme in my website, by using the Material Dashboard Pro from Creative Tim.
I have an input field with a label for it. When there is no text in the field, the label will be shown over the field. When the user enters some text into the field, the label should jump above the field.
When the website is in English, it works well:
But when I'm running it in Hebrew, the label jumps to the left of the field, outside of it:
As you can see, when the label is in Hebrew, the label won't show inside the input field, but outside.
This is my code for the field:
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">Name</label>
<input type="text" class="form-control" name="NAME">
</div>
</div>
</div>
How can I solve this so it'll work both for English and Hebrew?
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>
Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.