white-space: nowrap;causings breakages to layout

[terryupton]

Suggest that white-space: nowrap; is removed from the .pretty class as this can cause layout breakages depending on length of label and form width size.

An example being an opt in to a newsletter or terms and conditions that might have a longer phrase than a simple one/two word option.

I appreciate this might cause other layout issues that might beed to be resolved. Perhaps flex layout now it is widely supported?

[chrisblessing]

I was able to accomplish this with some CSS overrides, if you're interested in experimenting.

Using some standard markup from the examples, which I have contained in a column about 250px wide:

<div class="filter">
    <div class="pretty p-default p-smooth">
        <input type="checkbox" name="genres1" id="genres1">
        <div class="state">
            <label for="genres1"><span>Here's a really long genre name to test text wrapping</span></label>
        </div>
    </div>
</div>
<div class="filter">
    <div class="pretty p-default p-smooth">
        <input type="checkbox" name="genres2" id="genres2">
        <div class="state">
            <label for="genres2"><span>Here's a short one</span></label>
        </div>
    </div>
</div>

The CSS overrides:

.pretty {
    margin-right: 0;
    white-space: normal;
}

.pretty .state label {
    text-indent: 0;
}

.pretty .state label > span {
    display: inline-block;
    padding-left: 1.8em;
    line-height: 1.3em;
}

.pretty .state label::after, .pretty .state label::before {
    top: 1px;
}

The result?

[jocubeit]

Above solution still has shortcomings when using p-bigger and p-icon unfortunately. I'm still having troubles trying to get longer labels to align properly. Sentences that wrap to 3-4 lines are wrapping but check mark sits way above in previous elements.

[yogur]

I used pretty-checkbox without text to solve the issue. I placed the text in a div, and enclosed both pretty-checkbox and the text div in a row.

Something like this:

<div class="d-flex">
        <div>
              <PrettyCheck class="p-default p-smooth p-bigger"></PrettyCheck>
        </div>
        <div>Some very long text...................</div>
</div>

Note that I'm using class .d-flex from bootstrap which basically is display: flex I'm also using pretty-checkbox as a Vue component.

[getmarked]

I faced the same issue and @yogur solution worked beautifully without any modifications of my other code. Thanks!

I separate thing that i did was to add the label tag into the text div making it clickable/checkable.

<div class="d-flex">
        <div>
              <PrettyCheck class="p-default p-smooth p-bigger"></PrettyCheck>
        </div>
        <div><label for="....">Some very long text...................</label></div>
</div>

[xsdaniel]

@getmarked - Just curious on how you added the id to the input so it can be connected with the for, since the Vue component does not accept any prop to set an id.

[getmarked]

I'm using django templates, so can't help you with that. I'm not familiar with Vue.

[xsdaniel]

Thanks @getmarked - Got confused because the @yogur answer is related with Vue components! Thanks anyway ☺️

[xsdaniel]

If somebody is looking for how to solve it in Vue and having a clickable label, this could be an option:

<div class="flex">
    <div>
        <p-check class="p-icon p-smooth m-0" color="info" v-model="check">
            <i slot="extra" class="icon fas fa-check"></i>
            <label slot="off-label"></label>
        </p-check>
    </div>
    <label class="pt-1 cursor-pointer" @click="check = !check">Some very long text [...]</label>
</div>

Please notice the importance to hide the original label, otherwise the checkbox won't look good. And just in case, some classes are comming from Tailwind.