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.
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:
resize: none
resize: both
resize: horizontal
resize: vertical
| Value | Effect |
| none | The user cannot change the size of the object (default) |
| both | The user can change both height and width of the object |
| horizontal | The user can only change the width of the object |
| vertical | The user can only change the height of the object |
| initial | Sets the variable to the default value |
| inherit | Sets the variable to the parent element's value |
resize: none
resize: both
resize: horizontal
resize: vertical
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:
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 philosophy, when figuring out the workarounds, is:
- Think layers of code. Code within code
- Are you scaling the container, e.g. flexbox or a cell in a table, by having scalable content, where the container only changes size to accomodate for the size changing content? See the example below with the table column with adjustable width
- Is it the content being scaled by a size limiting tag? See the example with scalable logo below
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:
- 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.
- 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.
- The DIV with the content must have resize specified. In this example we have resize:horizontal
- The DIV with the content must have overflow specified to something other than visible. In this example we have overflow:hidden
- Padding, for some air between text and frame is specified for the DIV. Here the padding is set to 5px
- 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
| Effect | |
| none | The 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:
