Style Manager - General

As the name suggests, this category contains the general settings of a component to arrange and set its basic configuration by determining the following properties:

DrapCode Builder Additional Tools

Let's look at each property closely to have a better understanding:

1. Alignment#

It allows you to adjust the alignment of a component as "None", "Left" or "Right":

DrapCode Builder Additional Tools

If you select the alignment as None, then the component remain on its same position where you have placed it.

DrapCode Builder Additional Tools

If you select the alignment as Left, then the component moved to the left most part of the parent component.

DrapCode Builder Additional Tools

If you select the alignment as Right, then the component moves to the right most part of the parent component.


Ajusting the Alignment of a Component#

As you click on the component whose alignment you want to adjust, the Style Manager of that component opens automatically in the Right Toolbar. You only have to go to the General settings and adjust the alignment of the component as per you layout design.

DrapCode Builder Text Box

2. Display#

It allows you to adjust the display behaviour of a component as:

DrapCode Builder Additional Tools
  • Block: It displays a component as a block by adding space above and below it.

  • Inline: It displays a component in a way that height and width properties won't have any effect on it.

  • Inline-Block: It allows you to set the width and the height on a component.

  • Flex: It sets a flexible length on all the flexible components. It doesn't work on components which aren't flexible.


Ajusting the Display of a Component#

As you click on the component whose display behaviour you want to change, the Style Manager of that component opens automatically in the Right Toolbar. You only have to go to the General settings and change the display of the component as per you layout design.

In the example below, the display behaviour of the navbar component is changed from flex to block and menu links' display behaviour is changed from block to inline.

DrapCode Builder Text Box

3. Position#

It allows you to adjust the position of any component in all the four directions with respect to its parent component.

DrapCode Builder Additional Tools

Positioning a components using the top, bottom, left, and right properties will not work unless the position property is set first. They also work differently depending on the position value.

It has four major following settings:

  • Static: A component with static position is not positioned in any special way. It can only be positioned as per the normal flow of the page which means it won't be affected by changing the top, bottom, left and right properties.

  • Relative: A component with relative position is positioned relative to its normal position. It can be adjusted from its normal position by changing its top, bottom, left and right properties. Other content will not be adjusted to fit into any gap left by the component.

  • Absolute: A component with absolute position is positioned relative to the nearest positioned parent component (instead of positioned relative to the viewport, like fixed). However, if an absolute positioned component has no positioned parent component, it uses the document body, and moves along with page scrolling.

  • Fixed: A component with fixed position is positioned relative to the viewport, which means it always stays in the same place, even if the page is scrolled. The top, bottom, left and right properties are used to position the component. A fixed component does not leave a gap in the page where it would normally have been located.


Adjusting the Position of a Component#

As you click on the component whose position you want to change, the Style Manager of that component opens automatically in the Right Toolbar. You only have to go to the General settings and change the position of the component as per you layout design.

DrapCode Builder Text Box