Positioning of labels

[nikolaidk]

First of all - I really appreciate your work. Recently I have had lots of request on positioning labels left of control on larger devices and over control on smaller devices. It would be nice to have an easy way to control the position of the label, accros all controls, or just a property on each.

[claviska]

Have you seen this section? It might be just what you’re looking for. https://shoelace.style/components/input#customizing-label-position

[nikolaidk]

Yes i seen it. I have an issue with the switch and the checkbox. The switch has the input field wrapped inside the label. The final result for all results should look something like this, but with close to default shoelace styling on components.. Any ideas :)

https://cbrtechnology.files.wordpress.com/2021/02/bc173-2.png?w=2046

[claviska]

Maybe we can make this easier, but these styles appear to work. The first block is based off the previously linked example.

sl-switch.label-on-left::part(base) {
  display: grid;
  grid: auto / var(--label-width) 1fr;
  gap: var(--sl-spacing-3x-small) var(--gap-width);
  align-items: center;
}

sl-switch.label-on-left::part(label) {
  display: contents;
  order: 2;
}

sl-switch.label-on-left::part(control) {
  order: 1;
}

[nikolaidk]

Thank a lot :)

[nikolaidk]

It would be really nice with left labels out of the box with shoelace. Also ensuring same start position of labels and input fields. Would make forms in columns look really nice in business ui interfaces :)

[claviska]

Noted. I'll see what we can do to make this easier!

[chdenat]

I had the same problem today...

Here's how I fixed this by adding an attribute align-right to my component.

Jsx

        <SlCard id={'ui-camera-settings'}>
            <h2>{'Camera Settings'}</h2>
            <SlSwitch size="small" align-right style={{width: '200px'}}>
                Show Camera Position
                <span slot="help-text">{'Longitude, Latitude, Altitude'}</span>
            </SlSwitch>
        </SlCard>

CSS

sl-switch[align-right]::part(base) {
    display: flex;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
}

sl-switch[align-right]::part(label) {
    display: contents;
    order: 2;
}

sl-switch[align-right]::part(control) {
    order: 1;
    margin-left:auto
}