Column width changes on grid edit

[Mitch]

Have a tabular report with Grid Edit enabled.  When entering grid edit, it seems that all columns adopt the same width even though I have specified a fixed with in the report definition.  

See Account column in view mode:

 

Same column in grid edit mode:

How do I get this column to maintain it's proper width?

[sandy159]

Hi @Mitch,

You may find this Forum Post helpful: Grid Edit column width

Just add the provided code in the Footer of the Tabular Report DataPage with grid edit.

Regards

[Mitch]

Unfortunately that actually made worse per below. 

[cheonsa]

Hi @Mitch,

You may try the code below:

<style>
/*adjust the header of the grid edit*/
div[class="HeadCtnr"] th:nth-child(1) {
width: 300px !important;
}
div[class="HeadCtnr"] th:nth-child(2) {
width: 300px !important;
}
div[class="HeadCtnr"] th:nth-child(3) {
width: 300px !important;
}

/*adjust the content of the grid edit*/
div[class="BodyCtnr"] th:nth-child(1) {
width: 300px !important;
}

div[class="BodyCtnr"] th:nth-child(2) {
width: 300px !important;
}

div[class="BodyCtnr"] th:nth-child(3) {
width: 300px !important;
}
  
</style>

The code will adjust the width of the first three columns. You can change the number inside the th:nth-child(1) to the corresponding column number that you would like to modify. You can also change the 300px width size. 

 

Hope this helps!

[Darryl]

I have used the code provided by LittleMsGinger successfully to change the column width in a grid edit...thank you.

I have an issue that data in the new column is not the same width as the column. For example in a dropdown only the first few words of sentence are visible....suggestions? Also I tried changing the width to % but it seemed to cause other problems. Your suggestions are greatly apreaciated.

[kpcollier]

On 4/21/2021 at 2:06 PM, Darryl said:

I have an issue that data in the new column is not the same width as the column

@Darryl, I ran into the same problem. Fixed it using the code below. Replace TableName with your table name. 

select[id^="InlineEditTableName"]{
  width: auto !important;
}

Also, to fix it for fields/columns that are not editable, you can use the below code. However, I am not too sure how to drill this down more. 'Data' class name seems a bit ambiguous and may cause changes elsewhere. However, for my report, it did not. 

div[class^="Data"] {
  width: auto !important;
}

 

[futurist]

On 11/12/2020 at 6:28 AM, cheonsa said:

Hi @Mitch,

You may try the code below:

<style>
/*adjust the header of the grid edit*/
div[class="HeadCtnr"] th:nth-child(1) {
width: 300px !important;
}
div[class="HeadCtnr"] th:nth-child(2) {
width: 300px !important;
}
div[class="HeadCtnr"] th:nth-child(3) {
width: 300px !important;
}

/*adjust the content of the grid edit*/
div[class="BodyCtnr"] th:nth-child(1) {
width: 300px !important;
}

div[class="BodyCtnr"] th:nth-child(2) {
width: 300px !important;
}

div[class="BodyCtnr"] th:nth-child(3) {
width: 300px !important;
}
  
</style>

The code will adjust the width of the first three columns. You can change the number inside the th:nth-child(1) to the corresponding column number that you would like to modify. You can also change the 300px width size. 

 

Hope this helps!

Hi,

You may refer to this link on how to appy stylings to multiple sibling elements all at once:

 

[Kurumi]

Hi - Just an update, here is the other way to hide a column in Grid Edit - Tabular Report.

div.HeadCtnr > table > tbody > tr.Row[class*='cbResultSetGridTableHeader'] > td:nth-child(1), td[class*='cbResultSetGridDataCell']:nth-child(1){

    display:none !important;

}

Replace 1 with the position order of column to be hidden.