nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

RRubalcava

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

All comments

JeremyCoulson

Good call!

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

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

RRubalcava

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.