I’m looking to make a map control be square. I want to maintain the aspect ratio while adjusting to the width of the existing container.
Looking at the style properties, I cannot see how to do this? Is this possible?
Thanks,
Zack
Hi, Zack!
There’s isn’t a style property specifically for making a Container square, but I’ve had some success doing this exact thing by using the Dimensions style properties (Height and Width) of the Container in question. The idea is that if you define both Height and Width as the same number of pixels, you get a square Container.
Of course, it sounds like you don’t just want to hardcode the number of pixels: you want the size of the Container to fit the size of the screen being used to view it. Fortunately, every Journey automatically records standard data about the interface being used to access the application, and so the automatically-generated variables browser.height and browser.width can be used to refer to the viewing device’s height and width respectively.
For example, say you’re creating a square Container, and you want 20px of padding around it, so that it’s not running up against the edge of the screen. You’d define both the Height and Width of the Container as:
"{{IF(browser.height>browser.width, browser.width, browser.height) - 40}}px"
This uses the IF function to ensure that your square Container will fit on the screen regards of whether the app is being viewed in a mobile or Desktop view.
Does that help you get started?
1 Like