Create like spliter line with text

[Former Member]

Hi,

How can I create the following splitter line or just line with text like following in UI5

I mean the line like the AND and OR which have those text in the middle.

Thanks!

https://ctrlq.org/wp/wp-content/uploads/2015/11/hr-text.png

[former_member182862 · Accepted solution]

maybe you can style it a little

JS Bin - Collaborative JavaScript Debugging

[Former Member · Accepted solution]

HI Dennis,

Thank you!

There is simpler and quicker way to do it ?  I mean without creating custom control ?

Thanks!

[vaibhav_singh12 · Accepted solution]

There are other ways to do it, but considering your requirment which will also requires additional css, this would be the most efficient and simplest way.

[former_member182862 · Accepted solution]

I believe that you will have more code to write if you do not use custom control. And this is precisely what custom controls are meant for.

I would love to know if you (or other folks) have a better way to do this without custom control (please share your code).

Thanks

-D

[pinakipatra]

Hi ,

what Dennis/Vaivab has said is the corect way to do it but there is a workaround.

You can call the HTML control as shown below

new sap.ui.core.HTML({

     content : "<div style='width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center'><span style='font-size: 40px; background-color: #F3F5F6; padding: 0 10px;'>Section Title</span></div>"

})

[former_member182862]

Hi Pinaki

Using sap.ui.core.HTML to markup HTML tag is something that I do not advocate.

Just my personal view.

-D

[vaibhav_singh12]

Create a custom control with html content and css from this example:

https://jsfiddle.net/t7kwpcw7/

Modify CSS as per your requirements.