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?
Related
I have the below code snippet of a text box where one enters a mobile number. How do I have a pre-set value that a user can edit from?
For example:
The country code is already set and visible to the user, the user starts by entering their network provider number.
<div class="row">
<div class="col-md-6">
<div th:class="transfer-label"> Mobile Number
</div>
</div>
<div class="col-md-6">
<div class="form-group transfer-field">
<input th:id="msdn"
class="custom-input-normal rounded-input hollow-input-light"
type="text" name="msdn"/>
</div>
</div>
</div>
you can populate input tag with value using th:value attribute.
<input th:value="${variable}"> will render <input value="variablecontent">
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 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 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.
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.