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.
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.
Keeping HTML together
-
- Posts: 1460
- Joined: Tue Jan 24, 2017 5:51 am
- Location: 'Stralya
-
- Posts: 33
- Joined: Sun Jul 16, 2017 11:53 pm
- Location: Mongolia, Ulaanbaatar
Re: Keeping HTML together
Hiya, can you please give more details? I couldn't understand your question completely.
Also, can you include your HTML code?
Also, can you include your HTML code?
-
- Posts: 1460
- Joined: Tue Jan 24, 2017 5:51 am
- Location: 'Stralya
Re: Keeping HTML together
The image shows a multiline HTML field i.e. a field with the value
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:
What it is doing at the moment is
Code: Select all
Line1<br>Line2<br>City<br> etc
Code: Select all
label: Line1
Line2
CIty
Code: Select all
Label: Line1
Line2
City
-
- Posts: 33
- Joined: Sun Jul 16, 2017 11:53 pm
- Location: Mongolia, Ulaanbaatar
Re: Keeping HTML together
Ah, I see what you mean,
You can do it in lots of ways, the most easiest way is to just use a 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
You can add margins or paddings to the table or divs to get some space in between them.
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>
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>
-
- Posts: 1460
- Joined: Tue Jan 24, 2017 5:51 am
- Location: 'Stralya
Re: Keeping HTML together
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
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
-
- Posts: 33
- Joined: Sun Jul 16, 2017 11:53 pm
- Location: Mongolia, Ulaanbaatar
Re: Keeping HTML together
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
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,
If you need more info, please have a look at this BSV file
https://filebin.net/674f8cmg5v5cbm90/ro ... t=a4ha99dw
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;
}
Like so,
And use this bit of code,
Code: Select all
.rowFixer label, .rowFixer span {
display:inline-block;
vertical-align:text-top;
}
https://filebin.net/674f8cmg5v5cbm90/ro ... t=a4ha99dw
-
- Posts: 1460
- Joined: Tue Jan 24, 2017 5:51 am
- Location: 'Stralya
Re: Keeping HTML together
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.
This is a bit of a hack as the label is now hard coded, but it works for the moment.
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>