Division - Specified Width Line Breaks | Skuid Support Community

I'm trying to work with a 'specified width' Division in a Responsive Grid with extra long text. The problem I'm having is that the template/merge field I'm displaying is a long string and instead of displaying on a second line, I get jumbled text on top of each other. Is there way to put a space or line break to display properly? Using 'Fit to Content' is not an option. Below is a snapshot

Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1390758/RackMultipart20160330-17518-bn0ytt-repsonsive_Grid_Skuid_inlineJPG1459364712

Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1390758/RackMultipart20160330-17518-bn0ytt-repsonsive_Grid_Skuid_inlineJPG1459364712

Yechiel Kaplan

280 Points

Posted 4 years ago

4 years ago

Emily Davis, Official Rep

3,694 Points

Hi, Yechiel,
What browser are you using? Do you mind posting the code you are using for your template?
Thanks,
Emily

Comment

4 years ago

Yechiel Kaplan

280 Points

Hey Emily,

I'm using Chrome.

This is the code that I'm using:

(the bold text is the one I'm having trouble with)

<div class="nx-pagetitle-maintitle">{{Source__r.Type}}</div><div class="nx-pagetitle-subtitle">Rep: {{Source__r.Name}}</div>
{{#Account__r.Rep__c}}<div class="nx-pagetitle-subtitle">Support Rep: {{Account__r.Rep__c}}</div>{{/Account__r.Rep__c}}
{{#Company__r.Name}}<div class="nx-pagetitle-subtitle">Mgmt: {{Company__r.Name}}</div>{{/Company__r.Name}}
{{#Group__c}}<div class="nx-pagetitle-subtitle">Group: {{Group__c}}</div>{{/Group__c}}

Thanks!

Comment

4 years ago

Emily Davis, Official Rep

3,694 Points

Yechiel,
It looks like this is occurring because of the nx-pagetitle-subtitle class, which has a default line-height property of "4pt". I would recommend either:
(a.) adding the attribute style="line-height:normal" to each div using the nx-pagetitle-subtitle class, or
(b.) instead of using the css class, just apply the style attributes you want (e.g. font-weight, color) to each div (or make your own css class and specify the properties for that class through inline css)

Let me know how that works.
Emily

Comment

4 years ago

Yechiel Kaplan

280 Points

Hey Emily,

I went with option 'a' and that worked beautifully!

Thank you!

Comment

4 years ago

Emily Davis, Official Rep

3,694 Points

Yechiel,
Great! I'm glad that worked.

Comment