Adding html widgets to a website is an easy way to extend services and incorporate new capabilities, but sometimes they don’t always fit well. Changing the spot sizing can be a problem, particularly with hosted sites that are template driven. Here’s a way to solve this with a little help from Google.

Most websites today are built with deep cascading style sheets (css) that typically become increasingly  more entangled with each maintenance activity. Finding a landing spot’s container DIV section can be daunting, particularly to those whose expertise is not web oriented.

Even when the containing DIV section is located, how to expand it to make a widget fit is not always obvious. Which is where Google lends a hand, with it increasingly versatile Chrome web browser.

Locating the widget’s landing spot is as easy as clicking on it in Chrome, then right-clicking the mouse and selecting the InspectElement pop-up menu item. The first label in the [Matched CSS Rules] panel will be the name of the DIV section, either as a single element or a chain of elements akin to a path.

Once this is found then add a style declaration at the beginning of the widget’s html snippet to extend it using something like

<style>#widgetslot {min-width:123px;}</style>

where 123 is the widget’s preferred size, which could be in pixels, ems, cms or a percentage.

Sometimes this is not enough, because the widget spot’s containing DIV section may be constrained by its container, in which case the style declaration, above, has to be extended up the chain:

<style>.panel { min-width:456px;} #widgetslot {min-width:123px;}</style>

The min-width property is generally safer than setting an absolute size, in case floats are not properly cleared or are missing the overflow property: Only expand to the size needed.

The expansion only occurs when the page, or an inner html region, is rendered. Moving to another page will, in effect, reset and expansion done using this technique.

© Copyright 2011 Chuck Brooks for FutureWare SCG

Tags: cascading style sheets, css, google chrome, snippets, widgets

This entry was posted on Friday, July 29th, 2011 at 19:00 and is filed under Software That Works. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.