Change Widget’s Height

How to change Widget height using Source Code

Each Widget you build has unique Source Code that defines the behavior and properties of your Widget (Widget style, how the data is presented, and other adjustable properties). When you are working in the Widget Editor using the Properties Editor, you are using an interface that writes the code for you. It is possible to edit the Widget Source Code directly to write a Widget or adjust some of its properties, although this type of action is not typically recommended.

There are instances where editing a Widget’s Source Code directly can be useful, for instance when changing your Widget’s height. It is important to note that you need to be very careful when modifying your Widget’s Source Code so as not to introduce errors into your Widget.

This article will provide a step-by-step walkthrough for changing your Widget’s height by editing the Widget’s Source Code.

Changing your Widget’s height

Each Widget type has a default Widget height that can only be modified by directly editing the Widget Source Code. This feature is useful if you want to have all of your Widgets on a dashboard line up (see the image below). In order to control your Widget’s height, you will only need to insert a single line of code into the Widget’s Source Code.

Whenever you are editing Source Code, you can undo any of your changes by clicking the Cancel button in the Source Code editor. As well, you can save a copy of your Widget and then work on copy of the Widget’s Source Code without worrying about losing important data in the original Widget. Just remember to delete the extra Widgets as you finish working on them.

Note: A Widget’s width is determined by the layout of your tab and cannot be modified in the Widget Source Code.

To change your Widget’s height:

Note: This set of procedures assumes you are in the Widget Editor either as result of building a new Widget or editing an existing Widget.

  1. Click on the Widget Editor Menu Dropdown and select View Widget Source Code.
  2. Create a space below the “layoutConfig”: value.

  3. Type “height”: ###, in the empty line of code, choosing an appropriate number value.
    Note: The ### number value is in pixels and can be modified based on your preferences.

  4. Click the Update button.
    The Widget’s height is changed to 300 pixels.
  5. Click the Save button.
    The changes to your Widget are saved.
  6. Check the Widget’s appearance on the Dashboard page.

Release Notes

Find our most recent release notes.


Our community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

We're happy to help. An expert is just a phone call away.

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

© 2004–2014, Inc. all rights reserved. Use of the service and this Web site constitutes acceptance of our Terms of Use and Privacy Policy. technology is protected by the following United States Patents: 8078605, 8325738, 8352389, 8510382, 8566419.