Search code examples
jquerycsshtmlinputmaterialize

Right-Align Tooltip

I am trying to have part of a label for a text input field be right aligned.

Here is an example fiddle. 

<div class="row">
  <div class="input-field col s6">
    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    <label for="first_name">First Name <span class="right-align">Top Right</span></label>
  </div>
</div>

My goal is to have the 'Top Right' text be on the top right of the input. I tried adding the right-align CSS helper but it did not do anything.

I tried adding style="float: right;" which kind of works but the text is not perfectly aligned to the right

float: right not working

Is there a way to get this perfectly aligned against the right edge of the input field?

Solution

  • I'm really not a fan of over-using position: absolute to solve problems. Using this can cause performance issues because the browser has to create a new stack element and render inside out. Especially because it's already in an absolute, so now you'd have 3 stacking elements, when really to do this, none are needed.

    Less Dirty (no position, worst option) Fix:

    .abcd {
  float: right;
}
label {
  padding-right: 1.50rem;
}

    https://jsfiddle.net/f4036zmg/

    Why it works: The label is positioned absolute, so it does not take into consideration the padding of it's container element (.75rem). To get the left side align aligned correctly, it has left: .75rem which means the right is now 1.5rem to the right because it's width: 100%. Simply padding the label will force the float to move within the labels padded area.

    Let me know if you want the whole thing to work without positions, it's pretty easy. (However it looks like materialize.min.css is doing the work for you, in a very ugly way).

    Semi-Clean (no position, ok option) Fix:

    .abcd {
  float: right;
}
input[type=text].validate+label {
  width: auto;
  right: .75rem;
}

    Here we override materialize.min.css (maybe that's not a good option, I don't know). We reset the width: auto so the right will work and as before we have to pad for that .75rem

    https://jsfiddle.net/gL7fhx2q/

    Clean fix:

    Html Changes Required:

    <label for="first_name">
  <span class="">First Name</span>
  <span class="tar">Top Right</span>
</label>

    CSS:

    .input-field.col label {
  left: 0;
  padding: 0 .75rem;
  display: flex;
}
.input-field.col label > span {
  flex: 1 0 auto;
}
.tar {
  text-align: right;
}

    https://jsfiddle.net/7bw2zghr/

    Overriding materialize.min.css again, however should not cause issues for other designs. Reset the left back to the correct position left:0 and add padding like the input padding: 0 .75rem. Now the label correctly match it's siblings. Change the display of the label to a be a flex container and wrap both texts so they are flex items. Set the items to grow proportionally, and then correctly set the text of the flex item to right.