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
        Line2
        CIty


What it is doing at the moment is
Code: Select allLabel:  Line1
Line2
City
#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>
     <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

Code: Select all<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.
#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 {
     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,
Image
And use this bit of code,
Code: Select all.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
#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>>
    </div>
</div>


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