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

タグ付けされた投稿をもっと見る

Accepted answers

ReneRubalcava

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

ReneRubalcava

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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