Changing MultiSelect field height.

👨‍💻 Development Help
1

I’m new to this :slight_smile:
I’m trying to change the height of a MultiSelect when in Create/Edit mode.
From 48px (Multiselect box now.jpg) to 200px (Multiselect box 200px high.jpg)

I can preview the change in the Firefox inspector (style css in inspector.jpg), but when I do:

1 - unminify …/themes/SuiteP/css/Style.css,
2 - edit the “height:” line in select[size] block from 48px =>> 200px,
3 - Save, Admin/Rebuild&Repair, restart Apache (service apache2 restart),

I don’t see any changes. In the Inspector I still see “48px”.
I am obviously missing a step or two :-))

Any help will be greatly appreciated.
Inviro: Ubuntu server 16.04, Apache/2.4.18 SuiteCRM Version 7.9.6

2

You shouldn’t be doing your changes in
themes/SuiteP/css/style.css

but rather in
custom/themes/SuiteP/css/style.css

See

Also, style.css is made from

themes/SuiteP/css/style.scss

by compiling it with SASS. So you might want to use that compilation - if not, pay attention to any future changes in upgrades.

But this is just to make it upgrade-safe, it won’t solve your problem.

Your problem, assuming you fixed the CSS in the right place, could be caused by caching, either server-side or browser. There are more repairs in the Admin / Repair screen that might help. There is also “Developer mode”, Google for it.

A trick I sometimes use is I ask my browser to load the stylesheet directly with a URL like
www.mysite.com/themes/SuiteP/css/style.css
and force a hard refresh (CTRL-F5). Then I check if my change is in there.

1 Like
3

pgr, thanks!

Could you please explain the “compiling it with SASS” step? I found a couple of online css to sass converters, but I’m not sure what to or where to save.

Also, the client PC inspector still points to some place with the 48px value, even though I removed the cached files on the server and deleted the history on the client and server PCs; and rebuild a couple of times + ctrl-f5 on both PCs after every step.

I really appreciate your help with this.

4

Let’s skip the SASS compiling for now, it’s too much hassle and not much benefit.

If you load just the CSS file with the direct URL, do you see your change in there?

5

Hi pgr,
Thanks again for taking time!

If I go directly to “server”/cache/themes/SuiteP/css/style.css or “server”/themes/SuiteP/css/style.css I still do see the old value of 48px. Which is really weird since I changed it to 200px in “server”/themes/SuiteP/css/style.css; AND outright deleted it from “server”/cache/themes/SuiteP/css/style.css.

Developer mode is on btw, which from what I understand should clear the cache as well.

6

Caches are always tricky. You can have more caches in the way without even knowing about them (on your ISP, your LAN server, your router…).

Maybe this will fix itself in a few hours… or you can try it from another browser, or another computer.

7

Hi pgr,
No luck. I created custom/themes/SuiteP/css/style.css as you suggested, copied the changed style.css there. Rebuilt and gave it a couple of hours, rebooted our LAN router, tried from a couple of different PCs and browsers - no change. I just don’t understand it. Could it be that the style.css file gets overwritten by another css file?

Meanwhile I am reading your blog - I am really liking the VM idea - so I’m going to reinstall the whole thing. The height of the Multi-select is not a deal beaker for us. It’s just inconvenient in a big way. We are migrating an ancient Maximixer CRM and have several Multi-select fields, some with over a a hundred entries and up to a dozen selections per field. Would be really nice to figure out what makes this change stick. :slight_smile:

Thanks again,
Greg

8

Yes I believe style.css is not used directly, it goes through the cache folder, but obviously that should have been rebuilt after you deleted it.

Another possibility for your strange behaviour might be permissions problems. Maybe when you edit the file (from SSH? FTP?) it gets different permissions (like root) that the cache builder is unable to read, so the old file is used?

I don’t know.

BTW, you won’t regret going virtual!

9

Hi pgr,
I had to step back from my efforts to convert to our ancient Maximizer to SuiteCRM, but now I am back :-))

I did install, configure and test over our LAN SuiteCRM in VM, and am now saving incremental successes as completely reproducible backups.

But I am still fairly lost in my efforts to customize this one thing that stops me in my tracks. The completely unusable Multiselect field, which we heavily rely on in our current app. I made a couple of stabs at it, but nothing seems to work.

I have read your blog on customization, tried custom/…/style.css, but still have no luck in making the changes stick. Would you be kind enough to maybe walk me through the steps needed in a little greater detail? Or point me to a tutorial that I missed in my many searches.

Thanks,
Greg

10

What if you simply have a wrong CSS selector. Try making a simpler change to the

class for example, and see if you can see the effects.

I don’t really have any elaborate steps to teach you, it normally just works.

Maybe start by editing directly the original in /themes, instead of the /custom/themes version.

Sometimes I address the style.css directly in my browser and hit Ctrl-F5 to force refresh and check my changes are visible in text there:

http://your.server.com/themes/SuiteP/css/style.css

good luck

11

Hi pgr,

Thanks again for helping out with imports.
I am tinkering with the Multiselect field height issue again. I am going to try creating '… custom/themes/SuiteP/css/style.css …" file and go from there.
I have a question though. Do I need to copy the entire style.css file, or just the block of code. What I need to change, looks like, is in ’ select[size]{…} ’ block.

Thanks,
Greg

12

You need to copy the whole thing.

There are other ways to change less things but they are more complicated… so start by trying it the simple way, copy the file, and edit what you need in the copied file.

EDIT: I think I was wrong here. Just copy the bit of CSS you want to change, SuiteCRM will append it to the original style.css file.

13

In style.css, one of the select[multiple] lines should have the last item, the height, added:

select[multiple]{background-image:none !important;overflow:auto !important;vertical-align:text-top; height: 999px !important;}

1 Like
14

Copying style.css to the custom folder and making the edit suggested by global-dave worked for me.

I had to do a Quick Repair and Rebuild and do a forced refresh (ctrl f5) in browser to see the changes.

2 Likes