Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Grid header height
02/02/2009
21:09
Avatar
maggie
Member
Members
Forum Posts: 49
Member Since:
17/12/2008
sp_UserOfflineSmall Offline

Hello,

Is there a way to adjust the height of the grid header? I can only finde the property to set up the width of a column.

For example, I have a column header title  that's long- "counts with travel history", the counts are interger value so I don't want to set the column width too wide , hence the column title wraps and the second line is hidden. How to make the header higher so that the second line can be seen? 

Thanks!

Maggie

03/02/2009
01:49
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Use setLabel method.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/02/2009
15:24
Avatar
maggie
Member
Members
Forum Posts: 49
Member Since:
17/12/2008
sp_UserOfflineSmall Offline

Hello,

I used the setLabel method like this:

setLabel(0, "Invoice Number" ,{color:'red', 'text-align':'center','font-size':'15px', 'word-wrap': 'break-word'})

I want to set the text font size big but the whole string can't fit in the column header. Is there a method to set up the header layer height or cell height?

Thanks!

Maggie

05/02/2009
01:36
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

I never try, but you can experiment with height in setLabel something like

setLabel(0, “Invoice Number” ,{color:'red', 'text-align':'center','font-size':'15px', 'word-wrap': 'break-word', height:'30px'})

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/02/2009
23:04
Avatar
dmlenz
New Member
Members
Forum Posts: 2
Member Since:
27/02/2009
sp_UserOfflineSmall Offline

Maggie,

Were you able to get this to work?

Perhaps I am missing something; when I play with the height settings I am able to get a visible change but the text isn't actually wrapping.

Code is  a copy of what Tony has shown above.

Suggestions on design are also welcome.  I have an integer field never >4 digits with the title: Quantity Previously Shipped.  Anyway that I slice it Qnt Prv Shpd starts to look ridiculous.  Thoughts?  I'd like to avoid wasting the real estate with whitespace.

Any help or commentary is greatly appreciated.

Cheers,
David

27/02/2009
12:08
Avatar
maggie
Member
Members
Forum Posts: 49
Member Since:
17/12/2008
sp_UserOfflineSmall Offline

I am not able to get this to work.   I am not able to increase the header height- it seems that an empty row is inserted underneath the header and the title can't be displayed appropriately by using Tony's codes. The word wrapping does not work either.

My column titles also are also long but the columnns value usally are one digit integer. I am trying to make the title shorter but it is hard.

I'll appreciate if anyone can share a solution to this problem.

Thanks, Maggie

02/04/2009
07:06
Avatar
mckeaveney
New Member
Members
Forum Posts: 1
Member Since:
02/04/2009
sp_UserOfflineSmall Offline

Hi

Was anyone able to resolve this - i am also having the same issue

Thanks

02/04/2009
10:57
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Enclose your grid in div -> mydiv

Then after you load the jqGrid css add this

<style>

#mydiv table.scroll thead th  {

height:30px;

}

</style>

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/09/2009
11:34
Avatar
Kyle
Guest
Guests

I know this post is pretty old but the code above didnt work for me but this worked though:

<style>

   #mydiv .ui-jqgrid-title { height:30px; }

</style>

11/09/2009
11:00
Avatar
MamaliFrenchi
Member
Members
Forum Posts: 62
Member Since:
22/12/2008
sp_UserOfflineSmall Offline

I have never tried, but It woths trying. Have you ever tried to include \\n or </br> in your lables? somethign like:

Quantity\\n Previously</br> Shipped

24/09/2009
11:43
Avatar
Bruce
Guest
Guests

To set the height on the Header Layer within the jqGrid, I was able to get the following CSS code to work for my grid:

  <style type=”text/css”>
      #mydiv table.scroll thead th div { height: auto; }
  </style>

Using Firebug, I was able to see that the Header text is contained within a DIV tag, which is contained within a TH in a TR of a THEAD tag.  This is part of a TABLE with class “scroll”, so the CSS mentioned previously is correct.  However, the text is aligned in the middle vertically within the TH tag, so I added an additional align attribute to move the text to the top:

  <style type=”text/css”>
      #mydiv table.scroll thead th { vertical-align: top; }
      #mydiv table.scroll thead th div { height: auto; }
  </style>

You can then play with the column width within the colModel property, but keep in mind that if you are sorting, then there is a SPAN tag right next to the DIV containing the header text to accommodate the sort indicator graphic (which actually displays to the right of the text.  This may affect the height because it will adjust the header layer based on the combination of column width, font height, and the sort indicator placement.

05/05/2010
07:01
Avatar
egocks
Philippines
Member
Members
Forum Posts: 4
Member Since:
23/04/2010
sp_UserOfflineSmall Offline

Hi,

I encountered the same problem. But I was lucky enough to find the solution in a certain blog post -->http://2centtech.blogspot.com/.....-wrap.html)

In summary, the right CSS to set is:

.ui-jqgrid .ui-jqgrid-htable th div {
    height:auto;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
}

Although I'm not sure if this solution has any bad side effects...

Just sharing it here for the benefit of others who may encounter the same issue.

01/09/2010
01:34
Avatar
deepak_ahu
Member
Members
Forum Posts: 10
Member Since:
26/08/2010
sp_UserOfflineSmall Offline

Great egocks!! it worked fine for me to.. thanks

16/02/2012
17:17
Avatar
marine
toulouse, FRANCE
New Member
Members
Forum Posts: 1
Member Since:
16/02/2012
sp_UserOfflineSmall Offline

It works for me to! thank you!

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
36 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information