Question 42683 in Html Question posted in
Some basic documentation can be found here.

Is there a css property to make a label's width the same as the content width? – Html

I need to make the div with the question mark be right next to the top row of text in the label that it is paired with.

Does anyone know of some styles that I can give to the label to make the width/space that it is taking up equal to the width of the inner text? screenshot of the issue

Here is the html if that helps (working in angular), the display flex on the container div is keeping the question mark on the same line.

<div class="component-container">
  <input
    [attr.aria-labelledby]="labelText"
    class="checkbox-{{ checkboxSize }}"
    type="checkbox"
    [checked]="checked"
    [id]="checkboxId"
    [disabled]="disabled"
    (change)="onCheckboxChange($event)"
  />
  <label
    aria-hidden="true"
    [for]="checkboxId"
    class="font-{{ labelSize }} {{ labelColor }} {{ fontClass }}"
    >{{ labelText }}</label
  >
  <div class="extra-content">
    <ng-content></ng-content>
  </div>
</div>

so far the only thing that comes close is giving the label element the style word-break: break-all but I would rather have the label continue to break on words. Other than that I have tried messing with the display on the label and the parent div, I also tried different flex-shrink and flex-wrap styles but none of those have worked…

Tags:

2

Answers


  1. 0

    I don’t understand what you mean by "equal to the width of the inner text?", but to make a label width be the same width to the content width you can add this css to your label’s css:

    width: 100%;

    I’m pretty sure this should work, the css for the label should look something like this:

    .component-container .label {
  width: 100%;
  //rest of the label's css code
}
    Login or Signup to reply.
  2. 0

    Try this way:

    Html:

    <div>
 <label><input type="checkbox" value="" />Foobaar<span class="icon">?</span></label>
</div>

    //////////////////////////

    Css:

    .icon {
  font-size: 10px;
  position: absolute;
  top: 0%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search