List column width

[arnor@icetips.com]

Hi guys,

I seem to recall that I was able to change the Bootstrap class of a column in a LIST. Changing the bootstrap class in the element "Details" doesn't seem to do anything at all on a LIST (I'm sure it works on a form but I'm not using a form for this list)

Is this not possible or am I just not seeing it?

Best regards,
Arnor Baldvinsson

 

[troester]

You can add/change bootstrap classes like striped, condensed and hide/show columns depending on viewport width in list Layout settings.

You can set an element to "use as row class" to style list rows depending on element values.

But to define something column related (e.g. width, color...) to must use custom CSS (all td and th have a class "table___element")

 

[arnor@icetips.com]

Hi Troester,

Thanks! I think that may have been what I did but that was almost 2 years ago so...<g> Could do it with JavaScript too right, in the listxx.js just jQuery.addClass, right?

Best regards,

 

[cheesegrits]

You could do it with JS, but if all you are doing is adding styling to columns, that's overkill, just stick it in the list template's custom.css.

th.yourtable___yourelement, tr.ryourtable___yourelement {
   // your stuff here
}

-- hugh

 

[arnor@icetips.com]

Hi Hugh,

What I would like to do is add some Bootstrap classes to couple of columns. I have a table with 4 relatively narrow column and then one that's loaded from a TEXT field, which can contain several lines of text and is the right most column. Because of that the 4 columns on the left get wrapped squished. I've tried with JS and jQuery in a list_xx.js but it seems to execute really late, so the list loads and displays, then there is additional delay until I see the list columns widen. I have my own template so I'll play with the CSS.

I also need to set one column header text and doing that in JS is doable but you can see the header text change after the list loads. The text comes from a web service so I just have the PHP code to get it.

Best regards,

 

[lousyfool]

Editing the element, then under "List view settings" -> "CSS" tab:
Entering e.g. "span3" in "Heading class" and/or "Cell class" works for me.
Depending on your use case you could alternatively enter something like "min-width:120px;" in "Cell CSS".

(All without quotes, of course.)

 

[troester]

Yup, I forgot the element's list view settings.
To be on the safe side put a space before the class.

 

[arnor@icetips.com]

Hi guys,

Yes, NOW I remember! That's what I did! I changed my template to handle it and set the width (in "ch" which is the width of the zero character) and it worked great. Gives me more control over the width than use span, but then isn't responsive.

Thanks guys, appreciate the ideas !

Best regards,