Resolved: Multi-line label for radio button

Question:

I would like “This is label” text to stack right underneath the “Prefix Text”, while radio button to be aligned right next “Prefix Text”. Is it possible to get this done by updating class for div element that contains “This is label” only? I would like to keep label-container class untouched if possible as I may add icon in front of “Prefix Text” so I will need display: inline-flex to wrap them up. https://codepen.io/Judoboy/pen/OJQqPEW?editors=1100

.label-container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.label-text {
  display: flex;
  justify-items: center;
  align-items: center;
  height: 100%;
}

.prefix {
  font-weight: bold;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

<label class="label-container">
    <input type="radio" />
    <div class="label-text text-spacing prefix">Prefix Text</div>
    <div class="label-text text-spacing">This is label</div>
</label>

Answer:

You can do this:

Wrap both Prefix Text and This is label with additional div.
Change align-items in .label-container class to start (you can keep display: inline-flex).

.label-container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: start;
}

.label-text {
  display: flex;
  justify-items: center;
  align-items: center;
  height: 100%;
}

.prefix {
  font-weight: bold;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

<label class="label-container">
    <input type="radio" />
    <div>
      <div class="label-text text-spacing prefix">Prefix Text</div>
      <div class="label-text text-spacing">This is label</div>
    </div>
</label>

If you have better answer, please add a comment about this, thank you!

Resolved: Multi-line label for radio button

Resolved: How do I use SetWindowText with Unicode in Win32 using PowerShell?

Resolved: Shopware 400 Status Error “This value is too long. It should have 255 character or less.” When I Try Updating Database Table

Resolved: Using AWK to count multiple patterns in a file

Leave A Reply