Search

Aligning a total with it's sub-list amount column - Total column below a sub-list is not aligned

Created August 19, 2016 12:46

Original Post by Sandy (Imported from Ardevia Forum)

Hi,

Hoping you can help with this....

I have a sub-list that has 8 columns in it, the column width of these columns varies according to the length of the information stored in them once the item has been added.

One of these columns is an amount and under the sub-list is a total field that I can't seem to align as the sub-list columns change width/position every time the information in the columns length changes.

The preferred option is to specify a fixed width for each of the sub-list columns so that I can be certain when adding in my total that it always aligns with the amount columns.

How do I find out the ids of each of the sub-list columns to style a specific width?

Thanks
Sandy

Comments

9 comments

ArdeviaForum

August 19, 2016 15:50
Original Post by Liliia (Imported from Ardevia Forum)

Hi Sandy,

To style the sub-list columns specifyas child of anelement using :nth-child() selector.

Code:

<style> tr>td.ms-cellstyle:nth-child(number){ width:50px; } </style>

Replace 'number' by an index of the column.

You can add this snippet to page source using "Edit Source" command from the FORMAT TEXT ribbon or using Script Editor web part:
0
ArdeviaForum

August 19, 2016 15:50
Original Post by Sandy (Imported from Ardevia Forum)

Hi Liliia,

Thanks for this assistance.....

This works as long as the data that I have in my column doesn't extend past the defined style px, when it does, however, the length of the column extends with it. Is there any way to stop the auto-resizing of the columns when this occurs?

Thanks
Sandy
0

ArdeviaForum

August 19, 2016 15:52

Original Post by Liliia (Imported from Ardevia Forum)

Hi Sandy,

Please try this code:
Code:

<style>

table.ms-listviewtable.ms-listviewgrid>tbody> tr>td.ms-cellstyle>span{
display:inline-block;
overflow: hidden;
}
            tr>td.ms-cellstyle:nth-child(number), tr>td.ms-cellstyle:nth-child(number)>span{
            width:50px;
            }
</style>

Do not forget to replace 'number' by an index of the column.

Hope it helps.

ArdeviaForum

August 19, 2016 15:52
Original Post by Sandy (Imported from Ardevia Forum)

Hi,

Also just wanted to check if this solution will work if I have more than one sub-list included on a form. The second sub-list may not have the same columns or column-widths as the first one.

Thanks
Sandy
0
ArdeviaForum

August 19, 2016 15:53
Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

Hi Sandy,
You can add more specific style for each column like:

Code:

div[ard-webpart-id="<guid_of_sublist_from_source>"] tr>td.ms-cellstyle:nth-child(number){ width:50px; }

where this GUID( guid_of_sublist_from_source) you can get from source by looking forward-webpart-id attribute. In this way for each sublist will be unique id which you can use in styles.

Hope this will help you to implement required solution.
0
ArdeviaForum

August 19, 2016 15:54
Original Post by Sandy (Imported from Ardevia Forum)

Hi,

This is the code I have added in a Script Editor Web Part and it is not having any effect on the sub-list column widths:

<style>

div[ard-webpart-id="<1c5a4011-b3e2-49d5-b99e-b27255a99e18>"] tr>td.ms-cellstyle:nth-child(1), tr>td.ms-cellstyle:nth-child(2),tr>td.ms-cellstyle:nth-child(3),tr>td.ms-cellstyle:nth-child(4),tr>td.ms-cellstyle:nth-child(5),tr>td.ms-cellstyle:nth-child(6),tr>td.ms-cellstyle:nth-child(7),tr>td.ms-cellstyle:nth-child(8) {

width:100px;

}

</style>

Any help you could provide would be appreciated.

Thanks
Sandy
0
ArdeviaForum

August 19, 2016 15:57
Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

Hi, in this part of your style div[ard-webpart-id="<1c5a4011-b3e2-49d5-b99e-b27255a99e18>"] type GUID without brackets < > - not needed, should be just div[ard-webpart-id="1c5a4011-b3e2-49d5-b99e-b27255a99e18"], without brackets?. As? well ?please use last updated style from Liliia:
For example:
Code:

tr>td.ms-cellstyle:nth-child(2), tr>td.ms-cellstyle:nth-child(2)>span{ width:50px; }

Note: tr>td.ms-cellstyle:nth-child(2)>span? style for SPAN tag is added there as well.
0
ArdeviaForum

August 19, 2016 16:03
Original Post by Sandy (Imported from Ardevia Forum)

Hi,

This relates to earlier post

I am still having problems with this.....

Here is the code that I have included on the page:

<style>

table.ms-listviewtable.ms-listviewgrid>tbody> tr>td.ms-cellstyle>span{

display:inline-block;

overflow: hidden;

}

div[ard-webpart-id="8e8b02e3-6db1-455b-9fcd-23a795abfad4"] tr>td.ms-cellstyle:nth-child(1>span{

width:50px;

}

div[ard-webpart-id="8e8b02e3-6db1-455b-9fcd-23a795abfad4"] tr>td.ms-cellstyle:nth-child(1)>span{

width:50px;

}

div[ard-webpart-id="8e8b02e3-6db1-455b-9fcd-23a795abfad4"] tr>td.ms-cellstyle:nth-child(3)>span{

width:50px;

}

</style>

I have also attached the Link to Sub-column image so that you can see what this code is doing.

It is not altering the box around the cell but rather the size of the data displayed inside that box. The amount field value has been chopped off inside the still large input box.

I know I have the correct webpart id as I can see the application of this style but it is not affecting it in the correct way.

Thank You in advance for your assistance.

Sandy
0
ArdeviaForum

August 19, 2016 16:07
Original Post by iryna (Imported from Ardevia Forum)

Hi Sandy,

We have limited developers resources, that's why cannot respond on each non-bug issue.
You can use our skybow Rich Forms for more help.
0

Please sign in to leave a comment.