Hello,Recently I've changed a field type from "Select - Simple" to "Select - Multiple". Eventhough I changed the row from 1 to 5, the area size didn't change. Unfotunatley I stil see the the area of the box did not expend (see image attached).
How do I make the box area would spread on 5 lines? Do I need to override some settings? Do I simply need to type something in Stuff - Costum Attributes?
Many thanks,
Ofer.
This might be a bug with frontend selects rendering, do you get the same result if you add new mutiple select field?
Hi Klas,
Thanks for you reply. I get the same result when I tried adding new mutiple select field.
Do you know how to fix this bug?
I hope you could help me.
Thank you very much,
Ofer.
I tested this now and I can't replicate it , problem appears only with categories field in multiple mode, so not the same problem. In your case it is most likely some CSS from your template that sets selects to a fixed size.
Great ! Thanks Klas.
1. So how do I override the CSS settings of my template so the Select Multiple would spread upon 5 lines instead of 1 line?
2. By the way, does changing field type from "Select - Simple" to "Select - Multiple" might damage or easre any old data?
Many thanks,
Ofer.
Hi,
first one is impossible to answer without seeing site css, for second answer would be that, it should not matter as single select is stored the same way as multiple select where user selected just one option
Thanks Klas.
I right-clicked "inspect element" on the Select - Multiple box.
The first image is what I saw:
The second image is when I scrolled down.
If they didn't help, I hope you can suggest another way for me to show the css of the Select - Multiple box.
I really don't understand why it spread upon 1 line instead of 5 lines.
Thank you very much,
Ofer.
Hi,
unfortunately it is not really visible from this screenshots. Without actual access to the page it will be hard as it usually requires some experimenting with turning of some styles tha are loaded to find the one that is causing the trouble.
Actually, I think you should show us the properties for <select id="field" ... and not for the <option value="...
I've found somthing very interesting... When I changed the CSS of the attribute select to 95 (see image), the Select box changes to the right size:
By changing :
I see that it has changed all of my Select boxes (through-out the whole website. even the login and password field). I only wanted it to affect a specific Select Multiple - the one that is located in the search page.
How do I change only that specific select multiple box.
Thanks,
Ofer.
Create a new CSS selector:
select#field .select {height:100px;}
You should put it in your template's custom.css file (many templates support separate/custom CSS declarations, which will not be overwritten by template update).
In this path:
I haven't found any custom.css file. Is that a file I need to create?
Basically, the changes I made:
select, input[type="password"], .btl-input > input[type="text"], .uneditable-input { height: 100px !important; }
were made in this location: /profilu/templates/eventus/css/bootstrap.min.rtl.css
Where should I create the new CSS selector you recommended?
Thanks,
Ofer.
I would not recommend putting it in the template (bootstrap) css. It could be easily overwritten with any new update.
You can change the index.php but that would be also rewritten. However, you can just add the following to the <head> section and create a custom.css which would survive any template updates.
<link rel="stylesheet" href="/templates/eventus/css/custom.css" type="text/css" />
Thanks!
So just to make it clear:
1. I should add this:
<link rel="stylesheet" href="/templates/eventus/css/custom.css" type="text/css" />
to the <head> of index.php ? (or were you reffiring to another file)
2. And then I'll create a new custom.css and add only this code inside:
And this will make only the search page's Select - Multiple bigger. Is that right?
Many thanks, Ofer.
If you want to target a particular field, you can always add a special class in Markup Class column of your content view (view mode #3).
For example, you can name it keywords and use:
select#field .select .keywords{height:100px;}You could also add css style to the Seblod component options, Site tab->css
The Site (tab) -> CSS is the best place to avoid editing CCK_*** CSS files, when using Template|Component in modal screens. Is there a plan to allow css on a per view bases (such as site form/intro/content or list/item)? That would allow for granular per view styling, without the need to create overrides or write a "mile long" CSS declarations in Site > CSS.
Field (edit) >> Custom Attributes >> style="height:101px !important"
That solved it :)