Adapt a component size to the container


I am wondering if it would be possible to change the overall size of a component to fit in the window that is being placed. I have in my project a component showing two values and I want to show these values in a small card, which is the default size, but also make it bigger when the user goes into the details view.

I could create another component with different design to show the same values and associates each one of them to the different targets, but as it is exactly the same information and I want to keep things simple, it would be enough if there is a way that the original component can be just bigger overall fitting a bigger container.

I don’t know if it is possible but I haven’t seen that option of fitting the container and my components usually keep the dimensions that I establish in the component itself.

Thank you so much.

Hi, I am not 100% sure I understand the question you are asking.

It seems to me that align edges in the layout tab can produce what you want, but I imagine you have already tried that. So what am I missing?


Let me elaborate so it better understood what I was refering. I have created a component with certain dimensions and layout:

This component is to be place in a card for a list/grid of documents like this:

And that is working perfectly fine. Now, when the user gets into the “Details view” of each document, I want to show that same information, but the dimensions of that component are too small for the screen. So instead of creating another document, I was wondering if it is possible to stretch the overall size or dimensions to adapt to the “container” that place in the screen.

For that screenshot I have duplicated the component and simply duplicate the size of everything (text, background, etc.). But I have the feeling that I could achieve that without duplicating the component.

What I have seen in RS is that when you set the dimensions in the component, it does not matter the dimensions of the container where you place it in a screen. If the container is smaller than the component, it will only show part of the component. If it is bigger, it will show a scrolling container.

I hope I have explained it better this time.

Very clear thank you.

If you -do not- need to change the text size, this can be accomplished by using the the layout controls.
First you position the elements inside of the component using % instead of px (using key lines is also usually a good idea).
Then position the component inside of the detail screen and resize it as you wish. The elements inside of the component will re-position as the component gets larger or smaller.

You could also resize the text as it gets larger by using CSS and making sure that both the left AND right position of the text element is set in the layout controls, but I am not strong enough in CSS to tell you how. :frowning:

One way to insert the CSS is to create a plugin that contains only this in the main.js:

this.getReactWebCSS = function(exporter, elementBaseSelector, screenFormatId) {
    var css = 
      *  add your css here
    return css;

My colleagues might be able to offer another way to inject the CSS but I know this will work.

Hope this helps,