How does one change the widget icons sizes on WAB 2.7?
I am using launchpad theme.
CC,
Well in that case, here is what you need:
In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\styles\default\css\launchpad.css
Go to the bottom of the file and add these two new rules:
<SPAN class="selector token">.jimu-widget-onscreen-icon</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 60px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 60px ! important<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon img</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 32px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 32px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 14px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
In the apps main config.json you will have to adjust the position paramaters for the onscreen widgets to add your desired spacing: (i.e. top and right)
<SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"right"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">130</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
This the numbers used below are for doubling the icons size:
In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\widgets\AnchorBarController\Widget.js
<SPAN class="keyword token">var</SPAN> MIN_MARGIN <SPAN class="operator token">=</SPAN> <SPAN class="number token">16</SPAN><SPAN class="punctuation token">,</SPAN> ICON_SIZE <SPAN class="operator token">=</SPAN> <SPAN class="number token">80</SPAN><SPAN class="punctuation token">,</SPAN> ICON_IMG_SIZE <SPAN class="operator token">=</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">,</SPAN> BUTTON_SIZE <SPAN class="operator token">=</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">,</SPAN> NORMAL_MODE <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> MOBILE_MODE <SPAN class="operator token">=</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN></SPAN>
<SPAN class="selector token">.jimu-anchorbar-iconitem .icon-item.dockable</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> -45px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.claro .jimu-anchorbar-iconitem .icon-item .icon</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thank you Robert but i meant the toggle buttons on the top right of the launchpad theme.
my apologies for forgetting that detail. Although this was useful i also wanted to make the bottom icon buttons bigger.
sweet, thank you!
Robert Scheitlin, GISPthat worked nicely, in terms of anchor icon size! Double size was a wee bit much though!
On a related note, is increasing the # of widgets in AnchorBarController as simple a matter? I'm on 2.8. It seems to be a proportion of the viewport width although I didn't see where that was coming from in its widget.js.
Kevin,
It comes from several places in the widget.js. Lines like this:
domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>iconGroupNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'width'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>allConfigs<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">*</SPAN> <SPAN class="number token">2</SPAN> <SPAN class="operator token">*</SPAN> ICON_SIZE <SPAN class="operator token">+</SPAN> <SPAN class="string token">'px'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN></SPAN>
Hi Robert, I had figured.. I saw those and it seemed a bit involved.
So I discovered a simpler setting.
I changed ....
373 widgetWidth = Math.floor(mapBox.w / 2);
to divide by 1
373 widgetWidth = Math.floor(mapBox.w / 1);
..et voila. Icons across the screen. I actually notched it down to 1.5 and it worked nicely, took up most but not all of the bottom screen.
Hope this helps all.
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
