Card & Dialog - If the word is too long in goes off the screen in 480 Breakpoint

[VEDRAN]

Hi
I have a Card, Dialog and a Normal Button in my DEMO.

If I input too long word in Card text, when you show it in 480 Breakpoint, the word goes off the screen which then creates slide of the screen on mobile devices like Android Phones.

Similar thing happens in Dialog. If I put in too long word, the word should go into next row, but it does not. It goes off the screen in the 480 Breakpoint. You cant see the word in 480 Breakpoint (Mobile phones), unless you slide the screen to the right. You can click the Button inside a Card to open the Dialog.

Also, if there are too many words in the Button inside a Card, in the 480 Breakpoint the text inside a button will go into next row (which it should), but the button does not open enough below to show the text in the second row that is inside a Button.

Two thing happens with Normal Button (not the one inside a Card - also can see in my DEMO). If there are too many words in the Button, in the 480 Breakpoint the text inside a button Does NOT go into next row, thus the button does NOT open at all below to show the text that should go in the second row so the user can see the text inside the Button. I have not tested with more words in the Normal Button on DEFAULT wiew, but I suppose it will be the same issue.

DEMO:
https://easyupload.io/wpzjl8

[crispy68]

1. So for the button in the Card to have the height increase when it wraps, you will need to add some CSS as follows:

Code: Select all

<style>
#Card1-card-item4{height:auto;}
</style> 

2. For the button in column 2, I believe because it uses <input> for the button that this is limited to only 1 line of text and does not wrap. I don't think the intent for a normal form button is to have really long text that wraps. This is what <textarea> is for. I would suggest simply using the Themeable Button as it will do what you need.

3. As for the dialog text, you have 1 long word with no breaks so it is not going to wrap. Try this, select the text, drag it outside of the dialog, break up the letters inside to make multiple words. Open the properties to the dialog, set it back to absolute with left alignment, hit ok. Open it back up to set it back to floating with center alignment and drag the text back in. See if that resets it. When I did this it worked.

[VEDRAN]

First of all, thanks Crispy68 for your effort to solve my problem, but...

1. Regarding your answer about a Button inside a Card, this solution would include personalized HTML coding (this is from a keyboard of someone who uses WWB to build website and writes this answer, but knows just some bits of coding). Seeing your code here, a "simple user" who uses WYSIWYG would need to know alot here. Like: ID of a card, which is OK preaty easy to find, but also would need to know the ID of the Button inside a Card (my projects are much bigger then this DEMO), thats much harder to do for "simple user" using WWB, that then needs special CSS in order to do what a Theamable button does by default (which I can't use here). To find out ID of this button inside a Card, I would need for example to preview the page, inspect element and see the ID of my Button, then Google the code that would give me the result I want etc.
I don't think these users are that good. But, definately YES. Adding personalized code would solve it.

2. Theamable button does the trick. Will use Theamable button for the needs I need it for (many words . Though I think normal Button should be able to do the same simple thing like this. But its OK like this, as long as there is another Button included in WWB that doeses the same thing, but can do what I need.

3. Long text inside a Dialog. This works only if the text in the text box remains separated into smaller words. But I need this text to remain as ONE word for a reason. Not two or more. For me atleast.

4. The problem with long word inside a Card as Text is still also there. The text (one long word) will not go into next row.

Perhaps all this should be like this for some reason. I am not sure. But I need it differently, if you think it is OK to be changed so it can.

Thank you all for your help

[Pablo]

While we strive to make our UI as flexible and comprehensive as possible, it’s not feasible to include options for every potential feature.
HTML elements alone have over 100 properties, and including all of them in the interface would make it overwhelming and complex.
Even if we were to add extensive customization options, there will always be unique cases that require custom code to achieve specific behaviors.
So, in some situations, adding custom code is the best way to tailor functionality to your exact needs.

[VEDRAN]

While we strive to make our UI as flexible and comprehensive as possible, it’s not feasible to include options for every potential feature.
HTML elements alone have over 100 properties, and including all of them in the interface would make it overwhelming and complex.
Even if we were to add extensive customization options, there will always be unique cases that require custom code to achieve specific behaviors.
So, in some situations, adding custom code is the best way to tailor functionality to your exact needs.

Thats fine. Not a problem. I understand. Thank you for considering.

Must mention crispy68 again, thanks again for the help there.

[crispy68]

3. Long text inside a Dialog. This works only if the text in the text box remains separated into smaller words. But I need this text to remain as ONE word for a reason. Not two or more. For me at least.

4. The problem with long word inside a Card as Text is still also there. The text (one long word) will not go into next row.

Unfortunately, that is how it works normally. It can't wrap on its own if it is one long word with no spaces. However, you can add some CSS to force it. Try adding the following:

1. Right click on the text object, choose Custom CSS tab and enter the following:

Code: Select all

word-wrap:break-word;

This will force the long word to break to the next line.

As pablo said, it would be literally impossible to include every html, css, etc option available in WB. That's why this forum and Google is your friend. The one thing I can say, I've been able to learn more about CSS and javascript than I ever have due to trying to figure out how to do something in WB and I'm glad for it.