question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Control alignment/Justification of Checkbox group items

See original GitHub issue

Is your feature request related to a problem? Please describe…

Kind of. I have about 20 mixed length English strings in an array, and it made a decision to center them in the browser them instead of left justify. The strings may contain \ but no fancy characters. My code is as follows: `<b-form-group label="Please Carefully Verify The Following:">

          <b-form-checkbox-group

            id="checkbox-group-1"

            v-model="checklistSelected"

            :options="checklist"

            name="ckg-1"

            stacked

            size="lg"

            switches

          ></b-form-checkbox-group>`

Describe the solution you’d like

A way to set alignment? Unless it does not like a character embedded in my strings!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
tmorehousecommented, Mar 13, 2020

Perhaps you need to render individual options to get the centered

<div class="d-flex">
  <b-form-checkbox-group
    id="checkbox-group-1"
    v-model="checklistSelected"
    name="checklist-1"
    size="lg"
    switches
    class="d-flex flex-column mx-auto"
  >
    <b-form-checkbox
      v-for="opt in checklistb"
      :key="opt.text"
      :value="opt.value"
      class="mx-auto"
    >
      {{ opt.text }}
    </b-form-checkbox>
  </b-form-checkbox-group>
</div>

image

1reaction
tmorehousecommented, Mar 13, 2020

Ah… so this:

image

or this:

image

?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to align checkboxes and their labels consistently cross ...
Put each checkbox and label within an <li> element. Add overflow:hidden to the <li> and float the label and checkbox left. Then they...
Read more >
How to Align a Checkbox and Its Label Consistently Cross ...
This tutorial will show how to align checkboxes and their labels ... Set the vertical-align property to “bottom”, which is consistent across browsers....
Read more >
CSS Box Alignment - CSS: Cascading Style Sheets | MDN
Self alignment is when using justify-self or align-self , or when setting these values as a group with justify-items and align-items .
Read more >
Align and position .NET MAUI controls - Microsoft Learn
The alignment of a View, relative to its parent, can be controlled by setting the HorizontalOptions or VerticalOptions property of the View to ......
Read more >
Should checkbox labels be to the right or the left?
Selection checkboxes (e.g. in a list of items) should be 'before' the text (so, to the left in a left-to-right language like English)....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found