Increase Icon Size

2083
5
Jump to solution
11-08-2016 12:51 PM
TimHayes1
Occasional Contributor III

How do I go about increasing the size of the icons in the Header Controller Widget?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Nick,

   Is spot on. Here are a few other details.

  1. CSS change mentioned above
  2. line 783 in the HeaderCOntroller\Widget.js change marginTop: ((this.height - 24) / 2) + 'px' change the 24 to the same number you used in your step 1.
  3. in the apps config.json find the header controller widget line and change the headers height there:
  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.1",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_19",
        "icon": "themes/FoldableTheme/widgets/HeaderController/images/icon.png?wab_dv=2.1",
        "name": "HeaderController",
        "label": "Header Controller"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Then in the config.json still you will have to shift all the other widgets top down the amount that you increased the header (especially the maps top property).

View solution in original post

5 Replies
NickHarvey
Occasional Contributor

Hi Tim - I think you can change the size for these by editing the values in the apps' header controller css:  Example... "...\\FoldableTheme\widgets\HeaderController\css\style.css"

Change the "24" values below to the value that you need.  I also had to change the header width and the logo size to make this all work as well..

jimu-widget-header-controller .icon-node img{
  height: 24px;
  width: 24px;

HTH

-Nick

RobertScheitlin__GISP
MVP Esteemed Contributor

Nick,

   Is spot on. Here are a few other details.

  1. CSS change mentioned above
  2. line 783 in the HeaderCOntroller\Widget.js change marginTop: ((this.height - 24) / 2) + 'px' change the 24 to the same number you used in your step 1.
  3. in the apps config.json find the header controller widget line and change the headers height there:
  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.1",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_19",
        "icon": "themes/FoldableTheme/widgets/HeaderController/images/icon.png?wab_dv=2.1",
        "name": "HeaderController",
        "label": "Header Controller"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Then in the config.json still you will have to shift all the other widgets top down the amount that you increased the header (especially the maps top property).

View solution in original post

GeorgeKatsambas
Occasional Contributor III

Widgets that are not in the header which  css files do you need to modify to change icon size?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

George,

   That is covered in this thread: https://community.esri.com/thread/171233 

BrianEveritt1
New Contributor II

what about for dart theme. I'm trying to increase the size of the icons and the text that shows up when you hover over them. The icons are too small and the text is too small also for the project i'm doing. i've changed the icon size but it appears the icons wrap to the next line and a new scroll bar appears. Is there a way to make them increase in size and go down the line without becoming a icons you have to scroll too?

0 Kudos