Jewelry Box on screen widgets icon in mobile view

96
4
Jump to solution
04-26-2018 11:10 AM
IrfanAfsar
Occasional Contributor II

Hi all, 

I am trying to add css rules for mobile view of on screen widgets in Jewelry Box theme of WAB 2.7.

I added these css rules in G:\WebAppBuilderForArcGIS\server\apps\24\jimu.js\css\jimu-theme.css. 

They are not working here!

These rules are define in Launchpad theme from jimu-theme.css

.is-mobile .jimu-widget-placeholder
{
  width: 30px !important;
  height: 30px !important;
}
.is-mobile .jimu-widget-placeholder .inner {
  width: 16px;
  height: 16px;
  margin: 6px;
  line-height: 16px;
}
.is-mobile .jimu-widget-onscreen-icon {
  width: 30px !important;
  height: 30px !important;
}
.is-mobile .jimu-widget-onscreen-icon img {
  width: 14px;
  height: 14px;
  margin: 8px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Irfan,

   The css rules should be:

.jimu-ismobile .jimu-widget-placeholder {
  width: 30px !important;
  height: 30px !important;
}
.jimu-ismobile .jimu-widget-placeholder .inner {
  width: 16px;
  height: 16px;
  margin: 6px;
  line-height: 16px;
}
.jimu-ismobile .jimu-widget-onscreen-icon {
  width: 30px !important;
  height: 30px !important;
}
.jimu-ismobile .jimu-widget-onscreen-icon img {
  width: 14px;
  height: 14px;
  margin: 8px;
}

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Irfan,

   The css rules should be:

.jimu-ismobile .jimu-widget-placeholder {
  width: 30px !important;
  height: 30px !important;
}
.jimu-ismobile .jimu-widget-placeholder .inner {
  width: 16px;
  height: 16px;
  margin: 6px;
  line-height: 16px;
}
.jimu-ismobile .jimu-widget-onscreen-icon {
  width: 30px !important;
  height: 30px !important;
}
.jimu-ismobile .jimu-widget-onscreen-icon img {
  width: 14px;
  height: 14px;
  margin: 8px;
}

View solution in original post

IrfanAfsar
Occasional Contributor II

Robert,

I tried with the above one but still does not change any thing. Any idea?

Thanks,

Irfan

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Worked perfect for me...

0 Kudos
IrfanAfsar
Occasional Contributor II

Robert,

You are right! Refreshing app multiple time got it work. Thanks  a lot!

0 Kudos