How do I decrease the line spacing in dashlets and listviews (to show lines closer together)?

Is there an easy way to increase the number of lines visible in dashlets and list views, by decreasing the vertical spacing between each line? (This would put the lines closer together).

See

https://suitecrm.com/forum/suite-themes/10830-suite-p-theme-too-much-whitespace-need-more-compact-theme

and

https://github.com/salesagility/SuiteCRM/issues/2288

You can simply modify css style of current theme and increase the number of row from administration settings.

You can create your css file under: “SUITECRM_FOLDER”/custom/themes/SuiteP/css/style.css and rewrite all style class you want.

Roberto, are you sure that’s good advice for SuiteP, instead of editing the SASS file and compiling?

Thanks! I was just hoping to be able to tweak something in CSS to adjust things.

Reading the links you posted, I did not realize that SuiteCRM themes are not just themes (as in, for example, Wordpress), but are tightly-coupled to the underlying CRM structure and functionality … which is not a good thing.

If the user’s only choice is Suite P, come release 7.9, unless there is the ability to configure EVERYTHING without manually making CSS code changes … the spacing, colors, etc. … that is going to be a bad time for many system administrators.

Let’s not over-estimate the migration to mobile! Most users of most software are still using desktop and laptop computers.

Hi pgr,
this is a standard upgrade safe solution to customize style in the theme.
Generally, in these situations it’s necessary to write only some (simple) line of code to customize the style.

For a new theme SAAS should be a solution.
For some customization i think that create a standard css custom file is a good simply and readable solution.

But you can proceed whit what is better to you and to your pourpose. If you are faster with SASS that with css…do it :wink:

1 Like

Roberto,

I’m not wanting to simply increase the number of lines displayed. I know how to do that, in Administration.

Per the headline of this post, I am referring to the line SPACING … the padding … for each line in a dashlet or listview. I want to squeeze the lines closer together. This will enable users to see more information, without having to scroll around

Not being a CSS guy, I was hoping someone could point me to the correct parameters(s) in CSS.

In my experience it’s not easy to make SuiteP more compact.

I’m waiting for somebody to do it successfully with SASS changes.

There is a working solution from urdhvatech, without SASS, you can find it here on these forums and on Github.

For me, all this issue is really not going well. I’m patiently waiting.

I’m still using the SuiteR theme.

Respectfully, Suite P is just not practical for most users. It might be great for mobile use, for new users or when doing a demonstration, but that is not where the typical user is at. The typical user is using a desktop or laptop computer, is familiar with the layout and just needs to access information quickly … as in the case of a CSR on the phone with a client. The UI needs to flow, as the conversation flows.

The UX/UI is an extremely important component of all modern software and if it’s not done right, will have serious repercussions in many installations.

Use firebug or some html inspector in chrome or firefox to find css rules

…try this… and change padding value like you want.

/dashboard/
.dashletPanel .list tr th{padding-top:5px;padding-bottom:5px;}
.list tr.oddListRowS1 td, .list tr.evenListRowS1 td{padding-top:2px;padding-bottom:2px;}

/listview and sublist/
.table-responsive.list > tbody > tr > td{padding-top:2px;padding-bottom:2px;}

What file contains that code, Roberto? … I’m not finding it in the style.css for SuiteR.

Many thanks!

Now i can only test for SuiteP theme… but for suiteR could be the same (i hope )

You have to create your css file under: “SUITECRM_FOLDER”/custom/themes/SuiteR/css/style.css
and clean and repair from administration

I put the css code from your response above (i.e. just your code with nothing else) into a new file … xxx/custom/themes/SuiteR/css/style.css

It did not change anything, but I think I just need to research some more. It’s probably time for me to learn some CSS!

Many thanks!

p.s. yes … I did do a Quick Repair and Rebuild

try to see if in the source of the page there is your style.css, and use element inspector of your browser to see what kind of rules you have to overwrite to change the theme.

I’m sorry but now i can’t see SuiteR theme on my crm…

If you’re not going with SASS, there’s no need to waste time, just use what has already been done and generously offered to the community:

http://urdhva-tech.com/blogs/fine-tunning-the-suitecrm-new-theme

It’s even downloadable as a package, should be pretty easy.

Thanks, pgr, but I’m staying with Suite R for as long as I can. It’s just a much “tighter” layout.

Are you aware of this?:

https://github.com/salesagility/SuiteCRM/pull/3211

I am also sticking with SuiteR as long as I can, but it looks like it’s not very long : - (

Hi. Yes, I saw it.

I’m never an early-adopter of any new software or upgrades, so if something is working for me and is a good fit, I will just stay with that for as long as possible.

I will just wait for natural development cycle of the Suite P theme, so that any problems and dissatisfaction with layout, spacing, etc. are sorted out, before I climb aboard.

In so many software arenas, the push for mobile computing is compelling, but it’s not the day-to-day reality of most user environments.