Flexible object sizes by using resize





What is it all about?

When you are constructing a page for your site, you have an idea about the proper size of a given object, e.g. a textbox, an image or a table, BUT, it is possible that the reader would like to change the size, for some reason.

This can be done, using the variable resize. There is some limitations in regards to which objects resize can be used on, however, so you may have to be a bit creative here.






The variable resize

When using the variable resize, it is important that the element isn't inline or overflow is set to visible. In that case, resize won't work. Overflow has to be set to scroll, auto, or hidden. When you have a working resize, you can see a grey marking in the lower right corner of the object (unless it blends in with the grey background color you are using). For resize you have the following values:

ValueEffect
noneThe user cannot change the size of the object (default)
bothThe user can change both height and width of the object
horizontalThe user can only change the width of the object
verticalThe user can only change the height of the object
initialSets the variable to the default value
inheritSets the variable to the parent element's value


resize: none
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.

resize: both
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


resize: horizontal
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


resize: vertical
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.



Workarounds when resize doesn't work

Workarounds like the ones we are going to look at for resize, are fairly simpel in terms of concept. In terms of coding, they can require a bit of fiddling, as you are working with opposing forces that you have to cooperate. So, when starting on this type of solutions, a fair measure of patience is often required.

The philosophy, when figuring out the workarounds, is:


If you want to have tables with columns that can be adjusted in width, this cannot be done using resize on the TD tag. What you do instead is to insert a DIV that fills out the entire cell. This DIV is the element that can change size, whereby the cell adapts. The procedure is:

  1. The cell itself, i.e. the TD tag, must have padding set to 0px, so the DIV with the content goes all the way out to the borders. Padding, to make it look nice with som distance between text and border, must be applied to the DIV instead.
  2. The cell must have a small width specified, e.g. 10 px. If you don't specify this width, the browsers ad some distance between your DIV and the cell's right border, for some reason, even when specifying padding as 0.
  3. The DIV with the content must have resize specified. In this example we have resize:horizontal
  4. The DIV with the content must have overflow specified to something other than visible. In this example we have overflow:hidden
  5. Padding, for some air between text and frame is specified for the DIV. Here the padding is set to 5px
  6. The initial width of the column, before you start changing it, is specified by setting width on the DIV. Here the width is set to 150px. What happens is that the TD says the column has to be 10px wide, but because you place something inside the cell that is 150px wide, the size of the cell is forced to be 150px, so that is the width you see when loading the page
Value
Effect
noneThe user cannot change the size of the object (default)



The image tag IMG is on of the unscalable tags. So, if it is an image you want to be able to change, the trick is to start with a large image and scale it down by placing it in a DIV or something similar. By setting both max-width and max-height for the IMG tag to 100% the image keeps the heigh-to-width ratio, and because you use max-width and max-height instead of width and height, you avoid overflow in the frame, and the image only becomes as big as the size limiting width/height allows. Here we have a copy of the site's logo in 1118 x 1026 px in a DIV having width:150px, padding:10px, resize:both and overflow:hidden:

The HTML Shark