[Resolved] Split: Showing views content in a single line

[Author]

Posts

[chrisL-13]

Thank you so much Waqar. There is no way in a million years I would have ever figured this out.

I have a nit-picky question, though. When I edit the content template you created to insert the name of the local after the leader's name, if I look in HTML mode I see the 'Fields and Text' fields surrounded by an H4 tag. Then I see the 'this-contacts-local-v2' view underneath.

(hidden link)

When rendered, this puts the name of the local on a separate line in plain text, below the name of the contact.

When I change the markup, for example, to surround both the 'Fields and text' fields and the local name lookup view in the same tag — whether an H4 or div it doesn't seem to matter — the 'this-contacts-local-v2' view breaks. Nothing is rendered.

I expect there's probably a way to render both elements inline so that they appear as intended, but it would be better for accessibility and just plain old efficient markup if both the local contact's name, position and local name could be in the same HTML element.

The editor window allows it, but it breaks.

I've left the template as you created it but if you have a minute could you look at it to see if you can reproduce the problem and/or tell me what I can do to fix it?

cmkl

[Waqar]

Hi,

Unlike the classic views, the blocks-based views output is generated with much more complex HTML elements and tags, by default.

To force certain elements in a single line, you can wrap the contents in a special div with a class name 'special-inline-container':

<div class="special-inline-container">

<h4>[types field='first-name'][/types] [types field='last-name'][/types],&nbsp;[wpv-post-taxonomy type="position" format="name"]</h4>
[wpv-view name="this-contacts-local-v2" wpvrelatedto="[wpv-post-id]"]

</div>

And then include the following custom CSS, to make sure all enclosed elements are shown inline:

.special-inline-container * {
    display: inline;
}

.special-inline-container {
    clear:both;
}

I hope this helps and please let me know if you need further assistance.

regards,
Waqar

[chrisL-13]

No joy.

hidden link

I can add the markup to the content but it breaks the this-contacts-local-v2 view.

Also, when I delete the separator block, the this-contacts-local-v2 view breaks.

cmkl

[Waqar]

I've made the following changes and the CSS code is working now:

1. The shortcode used for the view was changed:

[wpv-view name="this-contacts-local-v2" id="tb-shortcode-8" data-tb-shortcode-id="8"]

I've switched it back to:

[wpv-view name="this-contacts-local-v2" wpvrelatedto="[wpv-post-id]"]

2. In the content template's CSS code field, I've included the custom CSS code:
( screenshot: hidden link )

.contact-name-title-local * {
    display: inline;
}
 
.contact-name-title-local {
    clear:both;
}

3. From the view's 'Loop Template' section, I removed the 'No items found' text so that when no local post is attached to the current contact, this message doesn't show:
( screenshot: hidden link )

[wpml-string context="wpv-views"]No items found[/wpml-string]