In my data model, I have a table (called Verse) which contains individual sentences. I would like to display them in paragraph form (one right after the other, with wrapping, etc). Eventually, users will be able to add comments/questions associated with each sentence.
So far, I am using a Block (with repeater enabled). The block contains a single text component, which is bound to the Verse text. This works correctlty - data is fetched from the database and the Text is repeated (as <span> elements in the DOM), which is great. However, the Block component in UI builder only has options to display as flex. This creates a scenario where each sentence is either stacked horizontally or vertically.
If I manually edit the style in the DOM using developer tools, to make the Block use display: inline-block instead of flex, then I can get approximately the correct behavior (sentences are one after the other, and wrap to the next line). However in Backendless Theme tab, when I try to create custom CSS, it cannot override the display: flex style, which is applied directly inline to the div.
Do you have any suggestions on how to achieve the effect I’m looking for?
I am open to any options for how to set this up in UI builder - thanks for any thoughts.
Could you please clarify how the UI components are mapped to the underlying data?
You mentioned that the text component (located in the Block) is bound to the Verse text. Does it mean each text component renders an individual sentence? Or the whole paragraph?
If the top-level Block is configured to use the left-to-right direction (as shown below), and the Text component located therein is used to render individual sentences, then you will get a rendering natural for the LTR languages.
The Text component is for individual sentences. Using left-to-right ordering, I can achieve either a single line with large left/right scroll, or a series of columns, depending on if I set the width of the wrapper to auto or 100%, respectively. I have not found the ability for sentences to be displayed naturally (yet!). Please see these screenshots.
If I manually edit the style in the DOM using developer tools, to make the Block use display: inline-block instead of flex , then I can get approximately the correct behavior (sentences are one after the other, and wrap to the next line). However in Backendless Theme tab, when I try to create custom CSS, it cannot override the display: flex style, which is applied directly inline to the div .
I could offer you an easy solution. Using this code you will achieve the override that you needed. display: inline-block !important
Bringing this solution back into the forum here in case others are following along.
In Mark’s solution, each sentence starts on a new line, rather than continuing after the last sentence. This is an improvement, but still doesn’t allow sentences to flow naturally after each other. (See photo):
This solution is good/acceptable, but one downside is that it has the potential to be fragile, since it has to “know” some of the UI implementation details (the fact there is an extra <div> inside of the Block component that is not part of the UI Builder hierarchy, and could potentially change some day).
Thanks all, I am unblocked, but please LMK if you think of anything else we should do instead.
Also, we are not creating any extra divs, it comes from UI that you create, so I think there are no parts potential to be fragile.
In fact, this way it’s just the default way to write styles, and only one thing that might be uncomfortable - it remembers !important is not being cascaded.
Thanks Dima, you are totally correct - I didn’t realize I had an extra container in there which was the “unexpected” div. I still have to use !important, but you made this even simpler. I appreciate it.
