Jump to content
  • 0

Column width changes on grid edit


Mitch
 Share

Question

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:

image.png.92eb705acb4160f21afec3835b79bd0f.png

 

Same column in grid edit mode:

image.png.e079924bc3d069f18781d99d7cc6ff88.png

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

view.png

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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!

Link to comment
Share on other sites

  • 0

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.711663543_WidthIssues.PNG.10e525f6997e5d59566fe13eb8c73fbc.PNG

Link to comment
Share on other sites

  • 0
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;
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...