Sideview Checkbox Layout

[cramasta]

Hi,
Is it possible to have the dynamic checkbox layout be horizontal rather than vertical? I have about 30 checkboxes having them be vertical takes up a lot of space on the dashboard.

Thanks

[sideview · Accepted solution]

<param name="float">left</param>

However this will only take effect a half second or so after the page loads, meaning there will be a noticeable jitter as the Checkboxes lay out vertically and then switch to horizontally. So while the float param is useful in a pinch, the best practice is to use a little custom CSS. If your view name is your_view_name_here, it would look like:

.splView-your_view_name_here .Checkbox {
  float:left;
}

UPDATE:

With the Checkboxes module instead of the simpler Checkbox module, there is no equivalent param, and as for custom CSS, you would use this slightly different CSS.

.splView-your_view_name_here .Checkboxes .checkboxWrapper {
  float:left;
}

Depending on what content is underneath your Checkboxes, you might find the layout underneath gets a little weird.

Also before you get too deep into custom CSS, you should note that all Sideview modules have a param called cssClass that allows you to put a special CSS class on their container div, and that this can be useful for cleanly specifying CSS behavior for only certain modules in a view. read the Checkboxes/Checkbox documentation and when you're done, click the link that says "view the specification for the [module] module" and you'll see the raw param specification including the cssClass param.

[gregstengel]

I am trying to do this same thing, but I am unclear where you put this custom CSS?

[cramasta]

Thanks for the update. I forgot that there were two modules for checkboxes.

This worked perfectly for me. First time I had to include custom CSS in my views

[sideview]

Oh Sorry. I thought you were using individual Checkbox modules, but I wasn't thinking. Yes it's different with Checkboxes module. I'll update my answer.

[cramasta]

[cramasta]

Would this need to be changed if using Checkboxes