Make toolbar shorter height by moving buttons out of groups

Permanently deleted user

April 04, 2018 15:48

Our customer is asking us to make toolbars as small as possible because when they open up the toolbar and click identify tool and it opens up the tool region it pushes the other tools down to a 2nd row.  So with a low resolution Toughbook and the left data pane also open, the map takes up a very small corner of the browser.  So one idea we had was to take all the toolbar buttons out of the subgroups to get rid of that bottom header such as "Navigation", "Find Data", etc.  But after removing the buttons out of the groups saving site and reloading the viewer it seems the toolbar stays the same height and leaves the whitespace under the buttons!  Is there a secret setting in Desktop.json.js that would tell the toolbar not to show this white space?

 

_img_ alt="Showing Navigation sub group" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=906f2000000k9ev&feoid=Body&refid=0EMf2000000fxnO"_/_img_

 

_img_ alt="After removing the sub group. Same height." src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=906f2000000k9ev&feoid=Body&refid=0EMf2000000fxnT"_/_img_

0

• 

  Permanently deleted user

  April 04, 2018 17:33

  Josh, I had the same issue. 

   

  I don't think you can get rid of the white space.  There are two ways you can improve this.

   

  I would suggest using more tabs to spread the tools out but keeping the tools the same size.

   

  Or you can open up your json and look for the tool name and changing it to Small (it's likely defaulted to 'Large').

   

  Example:

   

  "id": "TDOGms9v",

   

                "type": "toolbarGroup",

   

                "name": "Measure & Draw",

   

                "isDefault": false,

   

                "items": [

   

                  {

   

                    "id": "NavigationGroup",

   

                    "type": "toolbarGroup",

   

                    "name": "@language-toolbar-group-navigation",

   

                    "layout": "Small",

   

                    "items": [

   

  This will trim the icons to half size.

   

  Good luck,

   

  John

  0
• 

  Dan Giersz

  April 04, 2018 18:03

  You can probably control this with custom CSS.

  0
• 

  Permanently deleted user

  April 04, 2018 22:51

  You can play with the custom css if you are familiar with that. Use chrome developer tools and inspect the element and play with the css on the fly.

   

  Here is some that works. 

   

  This gets added to desktop.css  /* remove extra padding from the toolbar group */ .toolbar-group { min-height: 0!important; padding-bottom: 0!important; } /* remove the border of the groups*/ .nested-group .toolbar-group { border: unset; } /* hide the text from the toolbar group */ .toolbar-group h4 { display: none!important; }

   

   

  0

Please sign in to leave a comment.