CSS - increase width of details field

API & Customization
1

Hi, 

I have a Rich text Field (field_2007) and a Details View (view_3495). The rich text field contains a link to an iframe which is displaying an html file stored on Box.com

The Field is displayed as the only field of that view and I would like to increase the width of the field. I have inspected the elements and tried many many options but it does not work, I basing my updates on the example provided by knack:

/* Change the view_1 to the key of your table view */ /* Change the field_1 to the key of the field of the column you want to set */ #view_1 th.field_1 { width: 100px; /* width in pixels */ }

 

Questions:

1.Since it is a details view I assume the field number is not needed?

2. which kn element should I refer to in the CSS to increase the width? And should I also refer to the length in the argument?

My HTML looks like this:

//*[@id="view_3495"]/div[2]
#view_3495 > div.kn-details-column.first > div

<div class="kn-details-group column-1">

<div class="kn-details-group-column" style="width: 545px;">
 <table class="kn-label-left">

<tbody><tr class="field_2007"><td class="kn-value" colspan="2" style="padding-left: 0px;"><span style="padding-left: 0px;"><iframe src="https://app.box.com/embed/preview/wtskixnrkd0r6ps76im9n4icfz7wlygz?theme=dark" width="500" height="400" frameborder="0" allowfullscreen="" webkitallowfullscreen="" msallowfullscreen=""></iframe></span></td></tr>

</tbody></table>
 </div>

</div>

My guess is this should work but it doesn't:

#view_3495 > div.kn-details-column.first > div > div {width:1000px;}

 

Thanks!

 

2

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