Related Item control and 1st column width in IE

[holtonba]

When using the Related Items control, is there a way to set the 1st Column width that works in Internet Explorer?

I can add this CSS and it works in Chrome and Firefox, but not IE.


.ms-viewheadertr th:first-child td:first-child {

width: 200px;

}

[rostislav]

Not sure how your code would have worked for any browser, I tested it in Chrome and it didn't work. If you are using server-side related items control, use this code:

Code: Select all

.ms-viewheadertr th:nth-child(2) td:first-child {
  width: 200px;
}

In case you are using client-side render mode, use this code:

Code: Select all

.ms-viewheadertr th:first-child {
  width: 200px;
}

[Oz.Ab]

This works for the first column in my related items:

.ms-viewheadertr th:first-child {
width: 200px;
}

But I need this to work for the sixth column in my related items..this doesn't work:
.ms-viewheadertr th:sixth-child {
width: 200px;
}

Can you assist?

[Nikita Kurguzov]

Dear Oz,
Try to use :nth-child(number) selector instead - https://www.w3schools.com/cssref/sel_nth-child.asp

[Oz.Ab]

Thanks but I am having a little bit of trouble:

The following doesn't work:
.ms-viewheadertr th:nth-child(6) {
width: 50px;
}

Any suggestions?

[Nikita Kurguzov]

Dear Oz,
Works for me, maybe the difference is just not noticeable? Try to play around with higher Width and different numbers, for example:

Code: Select all

.ms-viewheadertr th:nth-child(5) {
   width: 350px;
}

Code: Select all

.ms-viewheadertr th:nth-child(6) {
    width: 350px;
}

Code: Select all

.ms-viewheadertr th:nth-child(7) {
    width: 350px;
}

[Oz.Ab]

Thanks for the quick reply Nikita.

The column that I am trying to make smaller is a person field (Assigned to) - maybe that is an issue?
I can make it bigger but I can't make it smaller.
I only want it to be approx 100px so it only shows the first letters in the person name. If I put it to 50px, it still shows the full width and full name :/

I tried: .ms-viewheadertr th:nth-child(6) {width:50px !important;} > but that doesn't work either.

If you have any suggestions I appreciate it.