Components as base layout

Hello,

I have created a component to use as base for page creation set as following pictures. I have defined the properties for each block(desired width, heigth and behavior) however once I load it to a new page it loses the configuration I have inputed.

. First of all, it kees changing the dimension parameter. However, I am not sure I can change this parameter

. I would like to limit this component to always represent 10% o the page height like following picture

. However whenever I load this component to a new page it gets out of the parameters I have specified as in following picture

Is there a config I am missing? Is it possible just to drop the component to a new page and it will force to follow the component parameters?

Thanks in advance.

Hi @Jose_Caputo

It gets 10% of the parent element not of the screen size.

Could you please provide your AppID and the container name to double check

Hi Vladimir,

Thank you for your time.

Please find informations below:

AppID: 2BA8D30B-05F0-477A-B322-41DDBD1BCFD5
Component: Block-b39b
Layout: landing_layout_workspace

In fact, in my mind I was planning on having layouts and just drag and drop the blocks over that layout, however I have saved a layout (landing_layout_workspace) but I cannot load it to any new page (I may also be doing something wrong here). In this case I would limit the blocks from the layout and have the components always in 100% so it would be limited byt the blocks from the layout. Since I could not load a layout I came accross with this solution to have the component right the size I want and just drag it to the layout.

PS.: Funny thing is when I preview the page, it shows right as I would like it to be.

I appreciate your time on this very basic question.

Well, I can recommend you a couple of options:

  1. replace dimension with px instead of %

  2. remove any height restriction for the reusable component and set the height for the parent component on a page or layout, because it looks like you are working on an app header and specifying strict height for the component might be an issue with responsible layout, would be better to set dimensions for a layout and all nested components fits available places

btw, I do not see you use the component in the landing_layout_workspace layout, it presents only on the landing page

Got it, it worked as I expected now.

Regarding the layout I thought it would load the blocks I created so I could load the components I wanted. To workaround with that I have created a page so it would work as the layout.

Thank you for your time!

Just for my education, is there a way to get the 100% for x and y from the users screen and set them as parameters for dimensions in px for everytime the page is loaded? It would need an action prior to this to maximize the screen and also to run this routine everytime the browser changes proportion

yes, you can use

    width: 100vw; // 100% of the viewport
    height: 100vh; // 100% of the viewport

Nice.

Thank you very much

1 Like