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>
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.
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>
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.
sweet, thank you!
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.
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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
