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

3 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