Using CSS to make list view full width

Tips and Tricks Design
1

Howdy gang, here’s a little bit of CSS you can use to make your list view span the full width of your screen. This is great if you have loads of fields you want to display at once.

.stk-content > div {
  width: 100% !important;
}

#pageHeroContainer div {
  max-width: 100% !important;
  margin-left: 6px;
}

.block {
  max-width: 100% !important;
}

Here’s how it looks on my larger monitor (and note this is responsive so you can resize the window and it should still look good!)

Before:

image
image3714×1278 308 KB

After:

image
image1920×661 59.9 KB

4 Likes
2

Hi Oli,

I gave this a try and the additional width looks nice! But I have two questions:

  1. even with the additional width, I still have numbers that don’t fully display. Is there a setting I can improve this? image attached.

  2. The width increased in the List View, but the same View is displayed in another table as a related list view within an Inbox View and it’s not expanded. Is there a CSS script to expand the Details Page width?

Thanks,
Khuned

Screenshot 2023-03-01 at 23.15.45
Screenshot 2023-03-01 at 23.15.452360×590 96.6 KB

3

Hi @Khuned_Sachdev -

  1. I’m not sure why your data isn’t showing fully in those columns, perhaps you could try rearranging the order to see if that works? Otherwise, I’d say add your feedback on our adjust column width feature request.

  2. I don’t believe so, but I’m hoping someone else might have figured out a workaround to this - I’ll let you know if I find out more!

4

image

It’s super simple to do, here is an example:
.stk-page-communications_detail .stk-field-communications__investors .stk-text-fieldText {
pointer-events: none;
}
Look for stk-page in the code and you’ll find what you’re looking for

1 Like
5

@Ambroise Curious if you’d be able to troubleshoot this with me…

  • Using the CSS successfully widens my page element, however it also makes my banner header justify slightly to the left: OTS Status Updates 2023-07-...

Talked with support and they weren’t able to provide me with any solutions.

6

That’s odd, I could take a look, but this is the kind of stuff that I need to inquire and have a look for myself.

7

Please be aware that this solution leads to issues with the kanban display mode.
In the kanban mode you have absolute positioned options on the left and right side.
Using this method leads to issues, since those are not visible anymore but still are active droppable areas.

Since there is now way to target the kanban container via CSS at the moment of writing, you need to overwrite the CSS for those views back to 1000px of width.