Grid Edit column width

[matstein]

I can't get my grid edit columns to change width and match the normal report view column width.   I would like them to be 50px  but they won't go smaller than 100.  I've changed all the CSS I could find, is there a trick?

 

Thanks!

[cheonsa]

Hi @matstein,

 

You need to have custom code in order to achieve your desired result. You can add it on the Header of your DataPage or add it on the Users defined under Style. Here is the code:

<style>

.cbGridCtnr > .HeadCtnr {

width: 100% !important;
}
.cbGridCtnr > .HeadCtnr > .Table {

width: 100% !important;
}

.cbGridCtnr > .BodyCtnr .Cell > .Data {

width: 100% !important;
}

.cbGridCtnr > .BodyCtnr > .Table{

width: 100% !important;
}

</style>

Hope this helps. 

 

-kristina

[matstein]

@kristina Thanks for the quick response, still not having any luck after putting that code into the header.  Any other ideas by chance?

 

Thanks!

[cheonsa]

Hi @matstein,

Can you provide the DataPage URL so I can check on my end? 

Or may also try the solutions provided here: 

 

 

 

[matstein]

@kristina

 

Sorry for the delay here is the URL, in the first drop down please select CLEV to get data.

https://c0abx108.caspio.com/dp/9cf55000189fa03392bf4405bfc2

It's like its not shirking to fit the grid edit into the 100% like it does for the normal report.

 

Thanks again for your help! 

 

 

 

[cheonsa]

Hi @matstein,

I just added "height:100% !important;" in every class. I tried it on my end and it works!

<style>

.cbGridCtnr > .HeadCtnr {

width: 100% !important;
height: 100% !important;
}
.cbGridCtnr > .HeadCtnr > .Table {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr .Cell > .Data {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr > .Table{

width: 100% !important;
height: 100% !important;
}

</style>

 

Cheers! 

-kristina 

[Leon13]

On 11/16/2019 at 7:37 PM, kristina said:

Hi @matstein,

I just added "height:100% !important;" in every class. I tried it on my end and it works!

<style>

.cbGridCtnr > .HeadCtnr {

width: 100% !important;
height: 100% !important;
}
.cbGridCtnr > .HeadCtnr > .Table {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr .Cell > .Data {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr > .Table{

width: 100% !important;
height: 100% !important;
}

</style>

 

Cheers! 

-kristina 

Thank you @kristina !! 

[Leon13]

On 11/16/2019 at 7:37 PM, kristina said:

Hi @matstein,

I just added "height:100% !important;" in every class. I tried it on my end and it works!

<style>

.cbGridCtnr > .HeadCtnr {

width: 100% !important;
height: 100% !important;
}
.cbGridCtnr > .HeadCtnr > .Table {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr .Cell > .Data {

width: 100% !important;
height: 100% !important;
}

.cbGridCtnr > .BodyCtnr > .Table{

width: 100% !important;
height: 100% !important;
}

</style>

 

Cheers! 

-kristina 

Hi - I just tried the code above and it works great for me except the header...
Appreciate any thoughts..  (I am using Tabular report with GRID Edit)

Thank you in advance!

[AtayBalunbalunan]

I also tried the code but the header in grid edit looks fine. Please ensure that you don't have any style that conflicts with it.

I just added the code only in the Footer of my Tabular Report DataPage with grid edit.

On 1/9/2020 at 9:16 AM, Leon13 said:

Hi - I just tried the code above and it works great for me except the header...
Appreciate any thoughts..  (I am using Tabular report with GRID Edit)

Thank you in advance!

[Leon13]

On 1/12/2020 at 12:15 AM, AtayBalunbalunan said:

I also tried the code but the header in grid edit looks fine. Please ensure that you don't have any style that conflicts with it.

I just added the code only in the Footer of my Tabular Report DataPage with grid edit.

Thank you SOO much, I made a rookie mistake, I had it in my header.

 

Works like a charm! 
Appreciate All Y'all! 

[cheonsa]

Hi team! Just to update with my previous solution, here is also another way to adjust the width of the grid edit. Please this see post: 

 

Cheers! 

[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.