Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Allow simple checkbox square-box styling without text #8565

Open
djmj opened this issue Apr 2, 2017 · 0 comments
Open

Allow simple checkbox square-box styling without text #8565

djmj opened this issue Apr 2, 2017 · 0 comments

Comments

@djmj
Copy link

djmj commented Apr 2, 2017

There are several use-cases where a simple checkbox is required without a label and just with a square box.

1) How it could look

show a styled checkbox. If no or empty label is provided render a square checkbox.

Two examples of in-cell editing and simple form: http://imgur.com/OIb3EjT

2) Actual behavior

empty label provided - styling collapses since no text is provided in html label component.
Solution: Keep the height even without a label text.

3) Workaround

a) use an invisible zero-width character to keep the height.
b) Add a css class keep height or to create a square box and use empty label.

/* checkbox without text styling */

.ui-checkbox-notext > label
{
    height: 1em !important;
}

.ui-checkbox-notext-square > label
{
    width: 1em !important; 
    height: 1em !important;  
    padding: 0.8em 0.8em 0.7em 0.6em !important; 
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant