Keeping HTML together

PointsWell

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

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.

Pomegranate

Hiya, can you please give more details? I couldn't understand your question completely.

Also, can you include your HTML code?

PointsWell

The image shows a multiline HTML field i.e. a field with the value

 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:

label:  Line1
        Line2
        CIty

What it is doing at the moment is

Label:  Line1
Line2
City

Pomegranate

Ah, I see what you mean,

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

<table>
     <tr>
          <td style="vertical-align: text-top;">
               label:
          </td>
          <td style="vertical-align: text-top;">
               Line1<br/>Line2<br/>City
          </td>
     </tr>
</table>

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

<div class="wrapper">
     <div class="col1">
          label:
     </div>
     <div class="col2">
          Line1<br/>Line2<br/>City
     </div>
</div>

<style>
.wrapper {
     position:relative;
     width:100%:
}
.col1, .col2 {
     width:49%;
     display:inline-block;
     vertical-align:text-top;
}
</style>

You can add margins or paddings to the table or divs to get some space in between them.

PointsWell

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

Pomegranate

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

.aw-form label, .aw-form span {
     display:inline-block;
     vertical-align:text-top;
}

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,

.rowFixer label, .rowFixer span {
     display:inline-block;
     vertical-align:text-top;
}

If you need more info, please have a look at this BSV file
https://filebin.net/674f8cmg5v5cbm90/rowFix.bsv?t=a4ha99dw

PointsWell

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.

<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>>
    </div>
</div>

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