44 Posts
Tina
7 years ago
3
Topic

If I want to have different label widths for labels in my search form, how do I do that? I don't want to change the default label size of 145px. I want to change each individual label width size. In my custom css file, I was able to add css for changing the size for labels of different field types. I also added a div around the label text with a class name and but then the divs above this too precedence and it did not work.

Get a VIP membership
1283 Posts
Bucklash
7 years ago
0
Level 1

Hi

Try something like this:

max-width: 100%;    
display: inline-block; // or maybe just 'inline' - margins will only apply for 'left' and 'right'  
padding: 3px 8px; // just an example    
border-radius: 2px; // just an example    
background-color: #333; // just an example
<br>

Have a look through your template to see if there are any class names that you can apply

I use Bootstrap 3 so  I would look here: 

BS3 Labels

Or look at a site that has what you want and see how they did it via the browser's inspector

Bucklash

4229 Posts
Kadministrator
7 years ago
1
Level 1

To change just one width you can target it by id - e.g.

#cck1r_label_art_title_backend {width: 200px;}

44 Posts
Tina
7 years ago
0
Level 2

I did that initially:

#cck27r_label_subject {width: 200px;}

The labels are in a search form with multiple fields (multi-selects, generic search, single select). When you pick different items in the fields, and then press the search button, then the label names change with the different search results. So the form could look pretty with the correct CSS and then look ugly with the search results below it. The number in the field kept changing: #cck<number>r_label... cck6r, cck1r, cck4r, cck3r. I didn't know all the possible div label ids with different numbers that would result from the search criteria. So I stopped using this CSS styling method. 

Get a VIP membership