CSS - increase width of details field


1 comment

  • Avatar
    Russ Darbyshire

    Undefined ^2: This might answer the part of your question as to how you identify a detail column in your table that has no field number, in CSS code.  I had a similar issue with a link in my table, while trying to set column headings to stay in one place while scrolling down the table.  I had two links in my table, one to edit, the other to a detail.

    By trial and error, I found that if on the live app, you hover over the link column in question (which can be a link to a detail, or a link to edit), right click on "Inspect Element", then isolate the line that begins with, "<th class="kn-table-link".  Make sure as you put your cursor on this line in the inspection box, that the correct column in your table is highlighted above.  Right click on that line and choose, "Copy-CSS Selector".  Then paste that in your CSS code.  So in my instance, the end result for the CSS line of code is this:

    #view_73 th.kn-table-link:nth-child(1) {min-width: 277px; padding:2px;}

    I found that it works, meaning it correctly identifies the column you are trying to format and formats it in the live app.  So my second column on this table is a link to a detail and the CSS code for that is:

    #view_73 th.kn-table-link:nth-child(2) {min-width: 161px; padding:2px;}

    Hope this helps.  -r

Please sign in to leave a comment.