0

I have a content/node View listing several node fields in an unformated list. The fields are displayed inline since they combine to make a message to users; on their own the fields don't mean much.

enter image description here enter image description here

As you can see there are 3 fields above; user picture, user name, and the comment body. I have marked the order and the areas of the 3 separate span classes. The problem of course is that when field 3 has more than one line of text the subsequent lines are not indented enough and overlap field 1. I have tried using margin-left and padding-left in combination with the text-indent property, but since field 3 is inline the CSS only ends up indenting the first line instead of the lines after the first as I need. I can display field 3 as a block and this does allow me to have better control, however it places the field on a separate row, and as mentioned previously I need the fields to be displayed inline so that they combine to make a message. In other words, if you see the red line below I would like the field 3 text to wrap and indent in a way that it stays to the right of the red line for lines 2 and after.

enter image description here

So it would end up looking something like below, but of course with the beginning of the lines not clipped.

enter image description here

The only thing I can think of is having 2 copies of field 3, both of which are trimmed. Therefore the first copy would be trimmed to only show 1 line and the second would be trimmed to show everything after the first line, however the problem is that I'm not sure how to trim the beginning of a field. So how can this be achieved?

Improve this question
2
  • This is CSS work, not drupal. For Drupal there's way to make table: 2 columns : image | Name + Body. Name should be excluded and cleared wrapper div. and shown on Body.
    – Nikit
    Jul 13, 2014 at 4:58
  • It is relevant to Drupal because I am applying CSS to Views results. If I was not using Drupal and hand coding I could simply divide my content up into as manny div/spans as I like and it would be much more straight forward to control. Also, could you please explain how creating a table would allow my to control the indentation of the text after the first line.
    – FrontEnd
    Jul 13, 2014 at 5:34

1 Answer 1

Reset to default
1
  1. Put the class clearfix as the row class (format->settings). If your theme does not have clearfix defined, define it yourself.
  2. Hide the output of the other two fields (click on the field in views form and you will see this setting 'exclude from display').
  3. Create a global: Custom text field and make sure it is the last field in the views list of fields.

  4. Rewrite results -> rewrite the output of this global text field, and from the replacement patterns select field 2 and 3 as tokens. Also add a class for that field in style settings such as 'align-block'. Define it as follows:

    align-block { overflow:hidden; }

in your css file.

  1. Add a class to your image field such as 'float-left'. Define it as follows:

    float-left { float:left; }

in your css file.

Improve this answer
2
  • Thanks for trying J. Reynolds, but I am not attempting to hide the overflow I am trying to indent the text after the first line. Perhaps this can only be done by splitting my field 3 into 2 separate fields and controlling each independently through CSS.
    – FrontEnd
    Jul 13, 2014 at 5:50
  • And this is how you indent the text. Don't be misled by obvious meaning of overflow. Check out this good post about it. CSS: Clearing Floats with Overflow
    – J. Reynolds
    Jul 14, 2014 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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