CODEWITHSUNDEEP
htmlcssvue.js
Andrew Rayner
Andrew Rayner

Reputation: 1064

Styling input label to align inside input box to float right

I am trying to align my input label inside the input box and float right

The input boxes are extended from b4.

Here is what it looks like now (arrow showing what I want to do) example of what I have done Here is the layout (It's in vue but just ignore. Only showing for how I am arranging my elements.

    <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>

And here is my attempt at css:

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;
}

Upvotes: 3

Views: 1540

Answers (1)

Mike Hermary
Mike Hermary

Reputation: 376

I have created this pen, which I believe answers your question. See Form input with right aligned label pen on CodePen. I have included my stripped down code below for quick reference.

HTML

<div class="form-control">
  <label>Test</label>
  <input type="text" placeholder="label">
</div>

CSS

* {
  box-sizing: border-box;
}
.form-control {
  padding: 0.625rem;
  position: relative;
}
label {
  position: absolute;
  top: 1.7rem;
  right: 1.625rem;
  color: blue;
}
input[type="text"] {
  display: block;
  width: 100%;
  padding: 1rem;
}

Upvotes: 2

Related Questions