If you have questions or if you want to share your opinion about Aware IM post your message on this forum
#54167 by PointsWell
Tue Jun 23, 2020 2:22 am
How do you prevent the second line of an HTML field from wrapping to under the label.

I have a multi lined HTML field which keeps wrapping rather than staying inside its cell.
Screen Shot 2020-06-23 at 12.20.03.png
Screen Shot 2020-06-23 at 12.20.03.png (7.95 KiB) Viewed 371 times

I have tried the field inside a div, which does keep it all together, but it moves everything under the label not just the second line.
#54169 by Pomegranate
Tue Jun 23, 2020 4:28 am
Hiya, can you please give more details? I couldn't understand your question completely.

Also, can you include your HTML code?
#54170 by PointsWell
Tue Jun 23, 2020 4:32 am
The image shows a multiline HTML field i.e. a field with the value
Code: Select all Line1<br>Line2<br>City<br> etc

Because there is a second line the html that second (and subsequent) line realigns itself under the field label, not under the initial line of the field. I need it to be:
Code: Select alllabel:  Line1

What it is doing at the moment is
Code: Select allLabel:  Line1
#54171 by Pomegranate
Tue Jun 23, 2020 4:47 am
Ah, I see what you mean,

You can do it in lots of ways, the most easiest way is to just use a table,

Code: Select all<table>
          <td style="vertical-align: text-top;">
          <td style="vertical-align: text-top;">

Or if you want to use <divs> to have more freedom of customization, then I recommend using inline-blocks or flex,

I'll use inline-blocks in this example

Code: Select all<div class="wrapper">
     <div class="col1">
     <div class="col2">

.wrapper {
.col1, .col2 {

You can add margins or paddings to the table or divs to get some space in between them.
#54172 by PointsWell
Tue Jun 23, 2020 8:06 am
I don't think I explained very well.

I have an attribute BO.BlockHTML
The contents of BO.BlockHTML might be
Line1<br>Line2<br>City<br> etc

I'm trying to build a form for the BO and just use the label from the system.

I tried the examples you gave but if I want to use the system label it still puts those underneath the label

Screen Shot 2020-06-23 at 18.05.21.png
Screen Shot 2020-06-23 at 18.05.21.png (10.26 KiB) Viewed 344 times
#54174 by Pomegranate
Tue Jun 23, 2020 9:23 am
Ah, I finally see what you mean,

Alright, we just need a bit of CSS for that,

You can either use this bit, which will have effect throughout your whole system
Code: Select all.aw-form label, .aw-form span {

Or you can assign a class to your form and it will have effect only on the forms you've assigned the class to,
Like so,
And use this bit of code,
Code: Select all.rowFixer label, .rowFixer span {

If you need more info, please have a look at this BSV file
#54240 by PointsWell
Wed Jul 01, 2020 3:30 am
Thank you. That gave me some ideas.

I ended up going with a slightly different approach and removed the AIM label and defined everything in the field.

Code: Select all<div class="form-group">
    <label class="control-label" style="width: 120px; text-align: left; float: left; ">Employer Address:</label>
    <div style="display: inline-block; vertical-align: text-top;"><<CO2001.psEmployerAddress.BlockHTML>>

This is a bit of a hack as the label is now hard coded, but it works for the moment.

Who is online

Users browsing this forum: Google [Bot] and 9 guests