By ibexy on

I have created a tables view with 5 columns. I want to control the column width for the 2nd column. How can I control the column width for a particular column (not all columns) For example, how can I set column 2 to 60px?

⋅ Categories: Drupal 6.x

Comments

benjamin.pauley’s picture

benjamin.pauley commented

There may well be another way to do this, but what I've done is to add definitions to the style.css for my theme. What you'll put in the CSS depends on the name of the particular field (column) you're trying to size, of course, but you can figure out the name of the Views field you're trying to target using Firebug in Firefox.

I ended up styling an entire table a column at a time by doing something like this:

td.views-field-field-first-column-value {
	width: 15%;
	line-height: 150%;
	vertical-align: top;
}

td.views-field-field-second-column-value {
	width:  25%;
	line-height: 150%;
	vertical-align: top;
}

td.views-field-field-third-column-value {
	width:  35%;
	line-height: 150%;
	vertical-align: top;
}

td.views-field-field-fourth-column-value {
	width: 5%;
	line-height: 150%;
	vertical-align: top;
}

td.views-field-field-fifth-column-value {
	width: 15%;
	line-height: 150%;
	vertical-align: top;
}

td.views-field-field-sixth-column-value {
	width: 5%;
	line-height: 150%;
	vertical-align: top;
}

For each of those field names (where I've substituted "first-column," "second-column," etc.) you'll use the name of the Views field that you discovered using Firebug.

vmevada102’s picture

vmevada102 commented

i am gving the following details of my content

View name: admniistration
Fields:
Photograph field_upload_admini File
Affiliation field_affiliation_admini Text
Status field_status_admini Text
Postal Address field_postal_admini Postal address
E-mail field_email_admini Email
Contact field_contact_admini Text

please i would like to display the fields displayed above...and needs the secific width of the column of the table....i am using Nitobe theme.....please help me to solve this problem and display the table with specific width

cajmcmahon’s picture

cajmcmahon commented

This worked for me... though there may very well be a better way.

I have four columns/fields. When I Grouped them they jumped all over the place width-wise depending on the width of each field and cell. The CSS below allowed me set individual fixed widths and even highlight the first column/field

One thing to note, in Views what I considered a "column" is actually a "field". You'll see when when you delve into to the code. The Advanced Help Views Theming was helpful to me in my understanding, as were many posts here.

I put this at the very end of my style.css file (I guess you can put it anywhere)

Change the "your-view-name" to whatever your View is called.
Change "field-name" to whatever your field (column) names are. The field names come directly from Fields in Views.
This allowed me make changes on a per-column (or more accurately, per field basis).

/* Views Table theming */

div.view-your-view-name  table td.views-field-name-1
{
    width: 80px;
/* background: yellow;    */
    font-weight: bold;
}

div.view-your-view-name table td.views-field-name-2
{
  width: 300px;
}

div.view-your-view-name table td.views-field-name-3
{
  width: 150px;
}

div.view-your-view-name table td.views-field-name-4
{
  width: 50px;
}

/* end Views Table */
rocknet’s picture

rocknet commented

Hello,

I've tried both of the suggested solutions but can't get it to work. I'm thinking that it must be something to do with where I'm putting the code or maybe that I'm substituting the the filed names with the wrong data.

I'm pasting the code into the style.css file in the active (Garland theme) folder

When I substitute the fields I do this .... views-field-name-3 .... becomes views-field-title

Can someone tell me where I'm going wrong please.

Steve

benjamin.pauley’s picture

benjamin.pauley commented

Have you customized Garland using the Color module, by any chance? I ask because, when you do so, you actually get a new .ccs file at Sites>Default>Files>Color>garland-[alphanumeric code generated by Color module]>style.css, and that's where your CSS changes would need to go, rather than in the Themes>Garland>style.css. (Or at least that's what's worked for me.)

If you've been able to make other CSS changes in the style.css file you've been working on, though, then the problem must obviously lie somewhere else—probably, as you say, in not finding the correct field name to use. A good way to get the right value is to inspect the element using something like Firebug in Firefox or the built-in developer tools in Safari and Chrome (I seem to recall that you have to turn these on in Preferences in Safari, though they seem to be on by default in Chrome). I'm not entirely sure, since I'm not looking at your site myself, but I think you might try "views-field-field-title" (or "views-field-field-title-value") instead of "views-field-title."

Best of luck.

itserich’s picture

itserich commented

Thanks this worked for me.

One thing I found, even with multiple pages, there appears to be only one View name for each page in that View, i.e. no separate view name for each page.

I think the unique field names handle them for each page within a single View, but just a guess.

skyryder’s picture

skyryder commented

Hello,

I'm having the same problem. When I make changes in:

table {
margin: 1em 0;
width: 100%;

}

I can see the result, but when I've used the two suggestions, and renamed with field names and view name found with with firebug, I see no change at all. I'm also using Garland, but have made no color changes. I'm using Drupal 6.19. I'm hoping to make the change only in sytle.css as I'm just a beginner and have done little with php.

Thanks for any help you can provide.

skyryder’s picture

skyryder commented

After some further trial/error I was able to get the first code example from Benjamin to work. I did find any width settings you put in compete with some other default rules established elsewhere, but at least this does give some control over the width.

subir_ghosh’s picture

subir_ghosh
Primary language English
Location Delhi/Bangalore/Calcutta
commented

Thanks for the pointer there. It worked fine for me. All one needs to do is look at the final HTML output and change the stylesheet accordingly.

-----------------------------
Subir Ghosh
www.subirghosh.in

ibartol’s picture

ibartol commented

Just wanted to thank you guys for sharing it with the rest of us. It worked perfectly for me.

For all the rookies out there (including myself), here's the final code you'll need:

WATCH OUT:
"novosti" -> its the NAME of the views
"created" , "title" and "timestamp" are field names
- and of course, if you add more div's, make sure to re-distribute the %

CODE:

/* Views Table theming */

div.view-novosti table td.views-field-created
{
width: 35%;
/* background: yellow; */
font-weight: bold;
}

div.view-novosti table td.views-field-title
{
width: 55%;
}

div.view-novosti table td.views-field-timestamp
{
width: 10%;
}

/* end Views Table */

vmevada102’s picture

vmevada102 commented

Please help me to solve this

View name: admniistration

Fields:
Photograph field_upload_admini File
Affiliation field_affiliation_admini Text
Status field_status_admini Text
Postal Address field_postal_admini Postal address
E-mail field_email_admini Email
Contact field_contact_admini Text

please i would like to display the fields displayed above...and needs the secific width of the column of the table....i am using Nitobe theme.....
please help me to solve this problem and display the table with specific width

iwant2fly’s picture

iwant2fly commented

Just wanted to say thanks for this example. It worked great.

acidpotato’s picture

acidpotato commented

I set the view width first. So for my view named search with css class view-search I needed to place following in my css file -

view-search {
width: 500px;
}