I am currently working on aligning my input label inside the input box and positioning it to float right.
The input boxes I am using have been extended from b4.
Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.com/VMaye.png Here is the layout structure (it's in vue but purely for reference on element arrangement).
<label class="input-label" :for="index" v-if="showLabel">{{ label }}
<span v-if="icon" :class="icon"></span>
<input v-if="form !== false"
type="text"
v-validate="validation"
v-model="current"
:id="index"
:name="index"
:disabled="disabled"
:placeholder="label"
class="form-control"
:class="{ 'is-invalid': form.errors.has(index) }" @input="triggerEvent">
</label>
Below is my current attempt at applying CSS styling:
f.input-icon {
position: relative;
}
.input-icon input {
text-indent: 30px;
}
.input-icon span {
position: absolute;
top: 50px;
left: 15px;
font-size: 20px;
}
.input-label {
color: blue;
}
label {
float: right;
width: 10em;
position: relative;
margin-right: 1em;
}