Related Item control and 1st column width in IE

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
holtonba
Posts: 7
Joined: Sun Feb 23, 2014

13 Sep 2015

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;

}

User avatar
rostislav
Moderator
Posts: 364
Joined: Mon Oct 19, 2015

14 Sep 2015

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
Posts: 39
Joined: Mon Oct 09, 2017

07 Jun 2018

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?

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

07 Jun 2018

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

Oz.Ab
Posts: 39
Joined: Mon Oct 09, 2017

07 Jun 2018

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?

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

07 Jun 2018

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;
}
Cheers

Oz.Ab
Posts: 39
Joined: Mon Oct 09, 2017

07 Jun 2018

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.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests