Dropdown list appear too big

Need help Responsiveness
1

i want to create a dropdown list but it appears to large and extends over the popup page

Screenshot%20(12)
Screenshot%20(12)1920Ă—1080 444 KB
Screenshot%20(13)
Screenshot%20(13)1920Ă—1080 455 KB

i want the dropdown list to appear like that of the bubble one thanks in advance

2

Did you find a resolution to this issue? I am having it much worse with my dropdown as my options are way longer

3

What size is your popup and dropdown? And what are the responsive settings on both?

4

2021-03-19 12_41_50-Window
2021-03-19 12_41_50-Window1907Ă—974 159 KB

^^^ This is how it looks like with my current settings which are:

2021-03-19 12_42_43-Window

I am not too sure how to find/edit settings on the popup

6

@extysolutions
I know you are already using my plugin in another case. It will never take larger that the input itself. If something is too big, it will take more rows instead.
Demo here:
https://sandboxjc.bubbleapps.io/version-test/testpopreuse

7

I sat here waiting watching your “replying…” thing lol.

8

By default, a dropdown menu will be as wide as the full length of the longest item’s selected option caption’s value.

If you want to make the width of the dropdown menu shorter (and therefore cut off some of the text), you can shorten the displayed text using :truncated to on the option caption.

So add :truncated to after the option caption to limit the number of characters and, therefore, the width of the dropdown menu.

Or, better still, use @Jici’s plugin

1 Like
9

Yep, that’s the one that has texts with commas that separated the texts. Due to my current structure, it wont be easy to pass along object there, but it’s important that options are not separated, since the next dropdown depends on it.

Also, some of the outputs are really long, so displaying entire option won’t look as clean as truncated ones as it would be taking vertical space.

10

Thank you! :truncated to seems to make it slightly better, however, it now looks weird, since some characters are wider than the others. So I end up with several strings where they both are truncated to 30 characters, but some of them are just physically wider than others, which results in the word being is cut in half while there is still unused white space created by other longer string.

2021-03-19 13_32_59-Window

What I was looking to do is to limit the width of a popup by modifying css of a popup, without truncating the text.

Or, alternatively, if the text has to be truncated, I would want to add ... to the end of the truncated string, but not to the shorter ones.

Something like

if text > 30 characters
text.truncate to 30 …
else
text

Any suggestions how to implement either of those?

11

In my plugin:

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};
'<div style="padding: 5px;">'+truncate(item.display,25)+'</div>'

https://sandboxjc.bubbleapps.io/version-test/testpopreuse

It would be also possible to modify the function and cut after a word instead of anywhere after x amount of character.

In Bubble dropdown, not sure how you can do that. May be possible. Didn’t get time to think about this case.

1 Like