0

I have a Drupal 7 view that gives me a list of links to recently added content of a specific type. For what it's doing, it's working fine.

However, it puts every content item in a separate <div> causing it to appear on a line of its own. I'm using the Unformatted list output format with all fields set as inline.

I want to simply list all the items concatenated.

Currently the view renders as approximately the following HTML:

<div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">

  <span class="views-field views-field-timestamp">        <span class="field-content">DATE1</span>  </span>       -    
  <span class="views-field views-field-title">        <span class="field-content"><a href="LINK1">TITLE1</a></span>  </span>  </div>
  <div class="views-row views-row-2 views-row-even">

  <span class="views-field views-field-timestamp">        <span class="field-content">DATE2</span>  </span>       -    
  <span class="views-field views-field-title">        <span class="field-content"><a href="LINK2">TITLE2</a></span>  </span>  </div>
...

I can get rid of the DATEs easily enough; that's just one of the fields being displayed. I was able to add the separating commas (using Custom text), and can easily use CSS to hide the last one if there's no better way. The problem is that I want the view to then basically render in the browser as something not entirely unlike:

TITLE1, TITLE2, ...

for the specified number of entries, where each TITLE is a link to the relevant LINK, the browser displaying them all in one normally-word-wrapped line.

How do I accomplish that?

Seemingly no matter what I try, the newlines remain in the browser-rendered output. Google was decidedly unhelpful, although I'm not ruling out that I searched for the wrong terms.

Just in case it makes a difference, I am using the MAYO theme.

1

Under Format click on settings and uncheck Add views row classes and uncheck Add striping (odd/even), first/last row classes

Edit:

You could use html list instead of unformated list.

Then use css to add the comas see JS Fiddle

or

since you added the commas's manually you could display inline or float left see this answer

  • Thanks for the answer, but I already tried this. With the formatting I'm already using and having hidden the date field from the output, it gives me a plain list with one row per item, each in a separate <div> element in the HTML causing the browser to add a line break between each. I want to replace that line break with a comma. Turning <div class="view-content"><div>...</div><div>...</div>...</div> into <div class="view-content">..., ..., ...</div>. – a CVn May 17 '15 at 9:14
  • I edited my answer. – No Sssweat May 17 '15 at 10:09
  • I figured it out. Thanks for the help! See my self-answer for the solution I came up with. – a CVn May 17 '15 at 10:57
0

I figured it out, with much thanks to No Sssweat's answer here as well as to another question. Since I had so much trouble figuring this out, I'm going to post the specific steps I took in an answer, for the benefit of future readers who want to do something similar.

First, have a view that gives the data you want to display. Start with the Unformatted list format and in its settings, check both Add views row classes and Add striping (odd/even), first/last row classes.

Then, add a separator using a Global: Text field to the view itself. I got some whitespace around it so changed from my original idea of a comma , to a separator character that worked better with whitespace on both sides, but I'm sure one could figure out how to remove the whitespace as well (perhaps using CSS content or margin trickery). It wasn't critical for my use case so I didn't bother. Add this separator text field as the last field to the view output.

At this point, the view preview will look rather odd, but that's okay. We'll fix it in place.

Then, add the view as a block and place it where you want it. If this isn't a fully isolated development environment, you may want to set it to only be visible to certain user roles for the time being, because it will look quite ugly at first. Once you can see the view on the page where it's going to be, use something like Firefox's Inspect Element feature on one of the output rows to obtain the ID of the <div> element corresponding to the block; you'll need that in a second.

Then, add some CSS (you might be interested in the CSS Injector module; no affiliation expressed or implied) like the second answer also linked above suggests. Specifically, try adding something like the following, substituting block-views-your-view-block as appropriate (use the id value of the block's <div> element):

div#block-views-your-view-block div.views-row,
div#block-views-your-view-block div.views-field
{
    display: inline;
}
div#block-views-your-view-block div.views-row-last div.views-field-nothing
{
    display: none;
}

The first rule causes the <div> elements of each result in the view to be displayed by the web browser inline rather than as blocks, and the second causes the last separator to not be displayed at all. If you have multiple fields in your view that have no corresponding data field, you may need to add a specific CSS class to the separator for this and use that class instead of views-field-nothing.

Save all this, and reload the page. Presto; your view should now display as a list on a single line of text, word wrapped by the browser as normal, rather than an all-out list.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.