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

Allow simple checkbox square-box styling without text #8565

Open
@djmj

Description

@djmj

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; 
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions