Styling this Dojo grid

[JeremyCoulson]

Given the example here:

http://www.co.frederick.va.us/dev/maps/test999.html?r=7545

Is there any simple CSS fix to make the grid header row not look very tall on some devices?  We're kind of married to this design right now, so I'm hoping there's a quick CSS fix for the header row.  If not, I'll just have to hide the table altogether on mobile devices.

Jeremy

[ReneRubalcava · Accepted solution]

Playing with this in Chrome, looks like the class name you are looking for is dojoxGridMasterHeader.
The default height seems to be 26px;
You could play with something like this.

/** Use em, px or %, whatever you prefer **/ .dojoxGridMasterHeader {  height: 20px !important;  font-size: 75% !important; }

[JeremyCoulson]

This will work quite nicely!

I had to add the same for the table row:

.dojoxGridMasterHeader {
        height: 20px !important;
        font-size: 75% !important; 
      }
      .dojoxGridMasterView {
        height: 20px !important;
        font-size: 75% !important; 
      }

I'm still going to hide the grid on phones, but it displays nicely on the iPad now.  Thanks!

Jeremy

[derekswingley1]

I would recommend adding this CSS to stop your loading icon from pushing the map around:

#loadingImg {
  position: absolute;
  z-index: 10;
}

[JeremyCoulson]

Good call!

Jeremy