topic Re: Styling this Dojo grid in ArcGIS JavaScript Maps SDK Questions

Styling this Dojo grid

JeremyCoulson — Thu, 20 Sep 2012 20:25:33 GMT

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

Re: Styling this Dojo grid

ReneRubalcava — Thu, 20 Sep 2012 20:45:22 GMT

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

Re: Styling this Dojo grid

JeremyCoulson — Sun, 12 Dec 2021 05:06:25 GMT

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

Re: Styling this Dojo grid

derekswingley1 — Sun, 12 Dec 2021 05:06:28 GMT

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

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

Re: Styling this Dojo grid

JeremyCoulson — Fri, 21 Sep 2012 13:49:36 GMT

Good call!

Jeremy