Forum Academy Marketplace Showcase Pricing Features

Can we make input ignore <100?

I only want the input value to be executed when >99. See video showing the situation and what I’ve tried. Thanks for any help or suggestion/workarounds.

Have you tried setting the minimum value for the input to 100? Then it would light up red that the number is invalid if its under 100, and your conditionals wont trigger until its 100 or more

1 Like

All that happens is the input field turns red, but the cell still minimizes and doesn’t retain it’s width. The issue may be because the size is being controlled by HTML and not from the standard Bubble inspector settings.

I need to somehow add a condition to the HTML which says 'Only when input_col1’s value is >99

Screenshot 2022-10-02 083332

I’m wondering if this would work/helps you using the Toolbox plugin:

I believe as long as your input has the minimum set it won’t actually trigger this until it’s above the minimum value

EDIT: I just tried it and it seems like it’s working but I had to set the group I’m resizing to something like Row, Column, or Align to parent and had to uncheck the fixed width option (on the new responsive) Which also it was obeying my minimum width setting so probably you could keep everything you have but just set your minimum width to 100…

1 Like

You can just use a Boolean expression in the CSS, then format the output of that (the yes/no) as a text…

i.e.

input's value: < 100: formatted as text

Yes = 100

No = Input’s Value

Good suggestion and thank you.

Ah that’s great, I didn’t know I could do that, thank you.

This isn’t working, I think I know why … if you have 2 mins please see video:

This isn’t working,

What do you mean it’s not working? (not working in what way?) I can’t see anything in your video where you’re doing what I explained (or at least what I meant), so can’t tell what you mean when you say it’s not working…

I have finally found the reason this is happening and it seems it could be a limitation in Bubble. The shape height resizes but width does not (see the one page app below showing you what I mean).

Because of this limitation I use the internal window input sizes to ‘stretch’ the container height, when the frame height’s input is ‘1’ then it shrinks to fit the content. However, when the frame width input is ‘1’ then it does not shrink, instead it goes to 100% wide.

Another observation is that ‘shapes’ default to max width and min height settings, when really it should be a square.

min max

@adamhholmes I have a solution which is fine for my needs. I have disabled the width input and instead I show the width based on the column widths;

input

This preserves the overall width of the css resizer shape because the shape expands based on the widths now.

By the way, I have to thank you again for teaching me about the html/CSS resizing code, it really made a HUGE difference and opened up so much opportunity for me.

1 Like

Shapes behave differently from groups (something to do with the flex-grow property I think…_if you change that to 0 it works the same as a Group)… so you can try using a Group instead of a shape…

Or, you can change the flex-grow property of the Shape to 0 flex-grow: 0 !important; (that works as well) - I’ve done this on the demo app you linked to above and it’s working perfectly…

Also, in your example app there, you had the parent group (Group A) set with a minimum height of 1000px - which is why the height wasn’t changing using ‘height’ in the CSS…

So if you take out that minimum height setting it works just fine… so that’s another option…

Or don’t use ‘width’ and ‘height’ in your CSS… use ‘max-width’ and ‘max-height’ (just leave the max width and height in Bubble set to infinite)… that also works as expected…

So, a few options to play with, but if you’ve already found another way that works then great…

That’s fantastic, thank you for those solutions, I’ll test them out and find the best option for my use case. Massive thank you!