Is there a way to limit scaling of width/ht of elements?

Once we scale elements using the responsive options is it possible to lay limits (minimum and maximum) to the width or height of elements that are automatically scaled?

normal css-selector should do the job:
max-width: XXXpx !important;

Thank you hans.

I am quite bad at code. I have attached a test project here with a flexible width rectangle. I want this rectangle to be flexible within limits however. Lower limit should be 50px and upper limit should be 200px for the width. Can you please apply that css trick to this rectangle and show how exactly it is implemented?

Thank you again.

testsizelimit.zip (13.8 KB)

Hi,

have a look at the hypedocumentation of how to add a class or id to an hypeelement.
do a websearch for how to apply css-styles to an element.
apply min-width and max-width (add !important to force the change)

sry, but it’s really basic and best for you will be to look it up yourself … at least i expect this to be the best :wink:

best day :slight_smile:
hans

sure thnks. the last time i tried to use css classes on hype elements i had a tough time. i will try again and see. that project was much more complex needing styles classes. this is simpler and probably i can crack it. Will post updates as soon as i try something so that others can see the actual code to learn from it.

thanks again. u were a great help.

testsizelimit.hype.zip (10.5 KB)
be aware that custom css will always collidate with hypes own bookkeeping …
setting the dimensions via javascript would be cleaner within hype. though much efford :slight_smile:

4 Likes

Thanks a million. Works!

Hi Hans,
I need to assign a minimum height to layouts. I know there is a CSS min-height property but I’m not sure how to apply it. I’ve got all the elements in each layout in a master group and I assume I must apply this to each master group. I haven’t found a way to set a global minimum height for the layouts.

<style>
.container {
	min-height: 500px !important;
}
</style>

Place this in the head HTML pane and give your groups a class of whatever (in this example “container”)

You could also dynamically do this on a scene by scene (or layout) basis using a function if you need different heights.

var containers = element.querySelectorAll('.container');

for (let i=0; i < containers.length; i++){
	containers[i].style.minHeight = "700px";
}

You can use the same function on each Layout (scene) by checking for the layout name. This one is the generic name when using the add layout option. You can add the names yourself and then add more else if statements for more layouts.

for (let i=0; i < containers.length; i++){
	if (hypeDocument.currentLayoutName() == "iPad Portrait"){
		containers[i].style.minHeight = "700px";
	} else {
		containers[i].style.minHeight = "400px";
	}
}
1 Like

So the style tag could be put into the main container of a scene - a container on top of a background cover image…

Nope. A group cannot be selected in such as way as to display the inner HTML.

You would have to give your “containers” a class.

The style tag above goes into the Head HTML pane. As mentioned. Then it references any element with that class in the classList. Including group elements.

As I mentioned also, if you wanted this to target more than one container in several layouts then you can use the function run on scene load.

I need to spend more time boning up on using JS with hype. I ended up getting strung up on unique IDs in responsive projects.