ComboStrap Styling - Dimension (Width and Height)

Undraw My Documents

About

Every Box components and even the whole main page dimension may be resized with the styling attributes:

Dimension

Width

The width attributes support the following values:

  • length - a length (in pixel, percentage, or other length unit)
  • a conditional length in percentage
  • fit-content - the width of the text.

If you want to center the box, use the align attributes

Example: a note will take all the space by default, if you want to constrain the box to a lower size, apply the width attributes.

<note warning width="200px" align="center">
=== A constrained warning note ===
I'm a note being constrained in a box with a maximum width of 200 pixels.
</note>
<note warning width="100%-xs 50%-sm" align="center">
=== A Note with a conditional width ===
This note will take:
  * 100% space on a mobile screen (xs) 
  * 50% on a small screen (sm) and above
</note>
For the Geek

On a box, the width attribute will apply a maximum-width constraint. When your website will be seen on a screen below this width, the box will adapt accordingly keeping your website responsive.

Height

The height attribute is also a style shortcut that will apply a maximum height.

Example: a note will take all the space by default, if you want to constraint the box to a lower size, apply the width attributes.

<note important width="200px" height="100px" align="center">
=== A constrained note in height ===
I'm a note being constraint in a box with a maximum height of 100 pixel.
</note>
A constrained note in height

I'm a note being constraint in a box with a maximum height of 100 pixel.

Horizontal Scroll

The default scroll mechanism is the lift but you can also set it to a Toggle animation

<note important width="300px" height="150px" align="center" scroll="toggle">
=== A constrained note with a toggle ===
I'm a note being constraint in a box with a maximum height of 100 pixel
and a toggle scroll mechanism.
In case, you wish to show the whole content at once.
</note>
A constrained note with a toggle

I'm a note being constraint in a box with a maximum height of 100 pixel and a toggle scroll mechanism. In case, you wish to show the whole content at once.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to center a box component ?

This howto shows you how to center a box component.
Landing Template Value
How to create a landing page?

This article shows you how to create a landing page with the markup component A landing page is a page with big horizontal sections that shows off your product or services. For your page, you should...
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout.
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...


Recommended Pages
Undraw My Documents
Collapse or expand any component with the toggle effect

The toggleTargetId is an attribute that transform a link or a button in a toggle element
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Undraw My Documents
ComboStrap - Prism

Prism components permits to add raw external content in the web page with extra's such as line number, copy to clipboard and eventually code highlighting The following component are prism component:...
Undraw My Documents
ComboStrap Styling - Align Attribute

align is an styling attribute of the HTML superset component It permits to align: the content of a component the component itself its children grid The align attribute values may applies: ...
Undraw Website Builder Re Ii6e
ComboStrap UI - Box

A box is a component that permits to contain other components. This is useful to: define the elements that should collapse or create a styled box. layout componenttext component Align Background-Color...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...
Undraw Website Builder Re Ii6e
How to create a carrousel layout

The carrousel component permits to layout and to scroll components horizontally.
Tweet Embeded Tweet
How to embed a tweet in your ComboStrap pages

This article shows you the tweet web component and how you can use it to embed a tweet in your pages



Task Runner