[Resolved] Vertically align Multiple Lines in View

[Author]

Posts

[Ben]

I am trying to vertically align the output of a Multiple Lines CF with all the other fields outputted in this View. See screenshot for the output I get at the moment.

I am using this in the Loop Editor:

	<div class="row">
	<div class="col-sm-3">[types field='test-single-line' item='$current_page'][/types]</div>
	<div class="col-sm-3">[types field='test-multiple-lines' item='$current_page'][/types]</div>
	<div class="col-sm-3">[types field='test-url' title='Link' target='_blank' item='$current_page'][/types]</div>
	<div class="col-sm-3">[types field='test-date' style='text' format='d F Y' item='$current_page'][/types]</div>
	</div>

And this in the CSS Editor:

col-sm-3 		{vertical-align: top;
}
col-sm-3	p	{vertical-align: top;
}

I cannot see why this isn't work? Can you help?!

[Christian Cox]

Hi, there's no one correct answer for everyone here because each theme and plugin can have different effects on text layout. I might be able to make a suggestion if I can see it in a browser. Please provide login credentials in the private reply fields here and let me know where I can find this on your site.

[Christian Cox]

The WYSIWYG field is automatically output in a paragraph tag, while the other fields are not. Paragraph tags have a bit of top padding in your theme, so the easiest way to line these items up is to wrap the other custom field shortcodes in paragraph tag s:

<div class="row">
<div class="col-sm-3"><p>[types field='test-single-line' item='$current_page'][/types]</p></div>
<div class="col-sm-3">[types field='test-multiple-lines' item='$current_page'][/types]</div>
<div class="col-sm-3"><p>[types field='test-url' title='Link' target='_blank' item='$current_page'][/types]</p></div>
<div class="col-sm-3"><p>[types field='test-date' style='text' format='d F Y' item='$current_page'][/types]</p></div>
</div>

This will make the top spacing more consistent in each column.

[Ben]

Thank you for your reply Christian.

It works well. Sorry to be a pain, but is there a way I can shrink this padding around the paragraph instead?

Where I am going to be using it, the text is going to need to be as close as possible with a very small amount of padding.

[Ben]

Could you also please delete the screenshot on Reply #1162455 please.

[Christian Cox]

Of course, the screenshot has been deleted. You can add some CSS to modify this paragraph's spacing. Add this in your Loop Editor's CSS panel:

.no-top-margin-p p {
    margin-top: 0;
}

Then add the no-top-margin-p class to the column that contains the WYSIWYG field:

<div class="row">
<div class="col-sm-3">[types field='test-single-line' item='$current_page'][/types]</div>
<div class="col-sm-3 no-top-margin-p">[types field='test-multiple-lines' item='$current_page'][/types]</div>
<div class="col-sm-3">[types field='test-url' title='Link' target='_blank' item='$current_page'][/types]</div>
<div class="col-sm-3">[types field='test-date' style='text' format='d F Y' item='$current_page'][/types]</div>
</div>

[Ben]

That has worked like a dream!

Thank you very very much for all your help with this ticket. It's appreciated!