Increase height of column header

[Raj DesaiParticipant]

Hi,

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellediting.htm

if i take this example, i want to know how i can increase the height of column headers. ? should i edit jqx.base.css file or any other file. ? also what css attribute i should give in order to increase the height ??

I tried to edit the jqx.base.css file.

.jqx-widget-header {
height:50px;
}

this doesnt work.

[ivailoParticipant]

Hi Raj Desai,

Try to use columnsheight property.
Here is the demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Raj DesaiParticipant]

Ivailo,

It works for me. Thank you !!!

[SravanthiParticipant]

Hi ivailo,

When I use the columnsheight property, I wish to see the column header name fits into that column and not a First Name…

I tried in the demo fiddle you suggested. But its still the same.

I need a column header height to show the full name.

For example:

columnsheight: 30,
     source: adapter,
     sortable: true,
     columns: [{
         text: 'First Name is very Big',
         datafield: 'firstname',
         width: 90
     } 

Then the column should display the whole name in the grid.

Please respond 🙂

Thanks in advance.

[ivailoParticipant]

Hi phoebe,

You can use renderer to customize displaying of the text in your column header.
Here is the demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[SravanthiParticipant]

Hi ivailo,

Thanks for the response. I have seen the demo and it is a fix for big names, but my problem is with the
responsive design view. When the screen size changes to 980* xx or 800* xx size or on projector, the text will be displayed as ” First Name…”

Will there be anything to avoid it and the resize of the header when the screen size is changed/reduced pixels.

The solution will help me a lot. Thanks.!!

[ivailoParticipant]

Hi phoebe,

With renderer you can use different CSS and JavaScript.
That means you don’t have problems with responsive design.

Here is another demo with a bit different CSS.
Try to resize the width of the first column.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts