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

Badge

Thanks @Pratap Kumble
It worked perfectly!


Sorry for the delay
Best

Hi @jean.patrick 

Did Pratap’s answer help you with your solution?

Best

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

Reply


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

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