Skip to main content

Search

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

Comments

9 comments

  • Ardevia Forum

    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:

    01.13.2016-12.54.png

    0
  • Ardevia Forum

    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
  • Ardevia Forum

    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.

    0
  • Ardevia Forum

    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
  • Ardevia Forum

    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
  • Ardevia Forum

    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
  • Ardevia Forum

    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
  • Ardevia Forum

    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
  • Ardevia Forum

    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.