5

I have a view with 4 columns. The first column, which contains a majority of the text is taking about about 80% of the width of the form and forcing the 2nd, 3rd, and 4th rows to wrap. Problem is those columns have content that should not really be wrapped for exmaple Tues 3pm - 5pm ends up looking like

Tues

3pm -

5pm

So rather than the columns adjust based on content, I'd like to manually set the width of the first column so that it leaves enough space for the others. Or if need be manually set all the column widths.

Please understand I am totally lost in drupal and only have a small amount of css/php knowledge so please be as absolutely descriptive as possible. I've found a bunch of examples in other areas but people have left out huge chunks of the code, or where it's supposed to go etc. One place kept says "make changes to the css", not sure if it's normal but I have about 25 different css files in my drupal install, I had no idea WHAT css to make the change in.

Thanks in advance for any help! This is a great community and I'm happy I went with Drupal because of it.

8

A more general approach than useful answers from @Michael Greisman @Neograph734 is to create some utility CSS classes that can be deployed on any View. That means if this requirement comes up when creating a new View, you already have a solution ready to deploy.

This is something that has been really helpful on a site where I have configuration responsibility but all template / CSS work is done by a contracted developer (who suggested this approach).

  1. Create some CSS classes that can be used to fix column widths. In our case, using % values worked best, but do whatever makes sense for your site. Example:

    .fix-width-20 {
    width: 20%;
    }
    .fix-width-40 {
    width: 40%;
    }
    .fix-width-50 {
    width: 50%;
    }
    
  2. On a view with the table format, go to the 'Style settings' for the Field that is populating the column (or columns) where you want precise control of column width. Add the name of the CSS class that fixes the width. Example:

enter image description here

| improve this answer | |
  • Awesome. I really like this approach as well. – TheMad Hatter Mar 3 '13 at 16:13
  • This is working perfect for me now. Thank you. I have one last question. Where would I put that css if I want it to change the display of the views auto preview? I addeded to my subtheme's style.css and my main theme's style.css and local css and it doesn't seem to fix it in the views preview. – TheMad Hatter Mar 3 '13 at 17:29
  • The preview uses the admin theme, e.g. Seven. So you could sub-theme that. In any case, the admin theme is where the CSS would go. If you just need this as temporary measure during testing, then you could add the CSS in a Global: Text area in the Header of your View. Make sure you use a Text filter that won't strip out the style tags. (Full HTML will work unless you've restricted it.) Then insert something like <style>.fix-width-test {width: 15%;}</style> into the Text area. This gets added to your page even on preview. But do take it out after you're done developing. – Obliquely Mar 3 '13 at 17:52
  • I was in fact looking for this, knew it existed, but couldn't find in the table settings dialog. Thanks! – Neograph734 Mar 3 '13 at 22:23
1

Oke, you will need to do two things. First thing is to find out what name was given to the first column. Views will name (almost) everything it creates.

Open the page with the table, and then right click the table and choose 'inspect element' (this migth depend on your webbrowser, you can also view the source code).

You will find some HTML like below:

<table class="views-table cols-4">
 <thead>
  <tbody>
   <tr class="odd views-row-first">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    <td class="views-field views-field-body">
    <td class="views-field views-field-custom">
   </tr>
   <tr class="even">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    ...

As you can see, each first field is called views-field-title (basically the name of the first field).

In your css, you can set a width by writing something like this:

.views-field-title {
  width: 60%;
}

The best place to put this, is a difficult question. The best way would be to write a custom module that uses drupal_add_css function to add a css file to the page. However it is quite a hard way for 3 lines of code.

For this case I think adding it to the bottom of your theme's css will work just as good (if you update your theme, you might have to add it again though). Also if you have users who can choose different themes, make sure to add it to all of them.

| improve this answer | |
1

@TheMad-Hatter, the earlier advice you got was correct; this is a styling issue, to be fixed using CSS. There are (of course) several ways to go about it, but the easiest is to change the style sheet for your theme.

If you can't tell which stylesheet to correct, change style.css. If that gets overridden by other style rules (that is, you know you did it right, you've cleared the caches, but still don't see the change)... then I'm sorry to be blunt, but you're going to have to learn enough CSS to deal with it. However, it's guaranteed to be worth the time.

  • The quick way is to change the style.css file in your theme.
  • The more correct way is to make a child theme (if you don't already have one)
    and change the style.css file in that. That way, you can apply updates to your parent theme without losing this addition.

CSS solutions:

You can style the width of the first column, perhaps like this:

.this-view table td:first-child {
  width: 55%;
}

However, that won't necessarily protect columns 2-4 from wrapping, so you might want to use this instead:

.this-view table td {
  /* initially set all columns to not wrap */
  white-space: nowrap;
}
.this-view table td:first-child {
  /* then set the first column to wrap normally */
  white-space: normal;
}

Oh, and the 25 stylesheets are normal. That is a whole different set of headaches.

| improve this answer | |
  • Thank you. Between your and Neograph's descriptions that is exactly what I need. I have a subtheme for that view as well as a local.css that allows me to make changes without fear of them being overwritten by theme updates. – TheMad Hatter Mar 2 '13 at 23:40
  • Something else I want to do in this view is the read the value of one of the fields and display icons instead of text depending on what the value is. In this case, when creating an event you can say it is contains drinking, art, science, food, sports etc. So I want to read which values are checked and put icons of a football, glass of beer, atom etc. Everything I've read points to editing the tpl file instead of the css, if I am doing that anyway, should I also be editing my column widths that way too? or is the css the better way to go? – TheMad Hatter Mar 2 '13 at 23:45
  • I think you'd do this in the View itself when outputting the values (Sports, food, etc.) or you'd do it in CSS. However, easiest to do it in the View. The view is outputting the value of the field. If the value is "Sports" then you may as well use a PHP field in the View, and output the HTML for the correct image depending on the value. (if sports, print <img src="football"> etc. – Michael Greisman Mar 3 '13 at 0:00
0
white-space: nowrap;

/* Adding the white-space:nowrap worked like a charm for the tables, did not need to add the width options.

Thanks Michael Greisman

| improve this answer | |
-1
  • Simple solution;
    • go to your CSS folder located under your subthemme
    • find a file called tables.css
    • locate code table.cols-4 {..... width: 200px; } CHANGE width: 200px; for width: 100%;
    • flush css caches.
| improve this answer | |

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.