Solved

Lists with text aligned as "justify" inside a Text Widget on Web UI are not being displayed as expected

  • 26 August 2021
  • 3 replies
  • 104 views

Badge

Hello, I am using WebUI and I would like to create create a Side Panel that contains a generic List.

I order to do so, I have added a Text Widget to the Side Panel. Then, I tried to fill it through both the input field and by setting a string parameter as input.

For both approaches, the List actually displays a very unusual alignment to the left when “justified” is applied as “Text Alignment”. 

Page Configuration:


Page View as a Side Panel:


My goal is to make it look closer to what is rendered in a web browser when the corresponding HTML code is loaded. 

For example, the HTML code corresponding to those pictures above could be presented as:

<ul style="width: 20%">
<li style="text-align: justify">
<b>Excepteur:</b> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum;
</li>
<li style="text-align: justify">
<b>Excepteur:</b> sint cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum;
</li>
<li style="text-align: justify">
<b>Excepteursint:</b> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum;
</li>
<li style="text-align: justify">
<b>Excepteur:</b> sint a b c d cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
</ul>


The information displayed in a web browser keeps every first word correctly aligned to the left as shown below:

 

Question

Is there a proper way, or even a workaround, to get the rendered list in the output to look exactly like the HTML one?

icon

Best answer by Pratap Kumble 27 August 2021, 07:24

View original

3 replies

Userlevel 4
Badge +2

Hi @jean.patrick ,

 

You can add the below custom CSS 

.ql-snow .ql-editor ul, .ql-snow .ql-editor ol {
margin-left: 25px !important;
margin-right: 10px !important;
list-style-position: outside !important;
text-align: left !important;
}

Please adjust the margins as per your liking. 

 

Do let us know if this works.

 

Thanks,

Pratap

Hi @jean.patrick 

Did Pratap’s answer help you with your solution?

Best

Badge

Thanks @Pratap Kumble
It worked perfectly!


Sorry for the delay
Best

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator