Why is all my field-cells are aligning right?

Hi Community,

All my field-cells are aligning in the right side of the container, without any reason…

Can anyone help me out?

Can you show us how are you setting up these containers?

1 Like

Thanks for reply!

Please check attached:

Skærmbillede 2023-01-04 kl. 11.37.03

I believe this should be fixed now. Looks to me that during today ‘Fields’ underwent a change not yet registered in the glide updates page. The change alters the styling of Fields to resemble App Basic Tables when the container or page is less than some certain width. Probably you found this error while they were rolling it out.

For me all looks and work great with the new styling. God bless glide for this change :smiley:

Where is the link to this magical page you speak of?

Here :wink: Glide • Product Updates

2 Likes

To be honest, these are usually pretty behind. I can see some updates in Dec that have been out for a while. This forum is the best place to hunt for new updates in staging/production.

Hey there, I still have this problem. How can I align it left? Thanks!

Can you show us a screenshot?

Of course (It’s about the text on the right. It is all right aligned, but I would like it left aligned. Then the bullets will come out right, too):

Ah I understand. You have to be on Business/Enterprise to use CSS and change that behaviour.

Though, I would argue that content that is too long don’t fit with the fields component at all. I usually just use two text components to display it. If I do it your way, it might look even worse on desktops.

Aha, thanks!

Do you know what the css code that I have to fill in?

Thanks a lot, really helpfull.

Not that much ideal, but here’s my attempt:

li[class*="fields"] >* {
display: flex;
justify-content: flex-start;
text-align: left !important;
}

div[class*="fields___StyledDiv2"] {
  width: 10%;
  min-width: 100px;
  flex-shrink: 0;
}

div[class*="fields___StyledDiv3"] {
width: 70%;
padding-left: 20%;
}

It will look broken on desktop though, so please adjust accordingly. Use a “Get device info” column to figure out the device’s width, and show a component for desktop/tablet, and another component for mobile. Name them accordingly and integrate the class names inside the CSS code.

1 Like