Join our Community in its new Home - The Datorama Trailblazer Community Group!

It's been an amazing 3 years coming together in this forum to collaborate, innovate, support, and inspire each other about our shared usage of Datorama. While this is not quite a goodbye, we are excited to announce that we are getting a fresh start in our new home within the Salesforce Trailblazer Community. We have a ton of fun new content planned and you may even see the revival of some of our most popular posts from the past few years.

We’ll be keeping this group around for a bit for you to peruse, but as of November 15, we will no longer be allowing new posts or comments. Be sure to join our new group at https://www.salesforce.com/success-datorama to keep the conversation going.

We can’t wait to see you there!

Here's how to make your widgets expand on hover

jharrisjharris LondonSYS_ADMIN IMG42
edited November 2020 in Dashboard Gurus
Hi everyone,

It's common for people to set up their pages with a top row of sticky filter widgets, so that no matter where users are on the page they can filter what they're seeing. This is great for interactivity and flexibility, but this top row takes up a lot of space and often doesn't need to be visible all the time. What if you could make the widgets smaller, and expand when users hover over them?

With this CSS, you can make widgets small and hover to expand them to whatever size you like:
div[class].grid-stack-item-content {
  width: 100%;
  height: 45px;
  left: auto; /* to expand to the right, delete this line */
  transition: 0.2s;
}
div[class].grid-stack-item-content:hover {
  width: 200%; /* or px */
  height: 400% !important; /* or px */
  z-index: 1000 !important;
}
Now you can make widgets natively small, and expand larger beyond their normal size on hover. Hovered widgets will go on top of other widgets. For something like a Switch Dimensions widget, you can make it expand to a fixed size (defined in px) to fit all your options regardless of the browser window size (usually widget size is responsive based on that).

All of the above works perfectly with interactive filter widgets, but most likely won't work with visualisation widgets. This is because often their elements are absolutely positioned, so the widget expands but the content stays small. Give it a try and see if it works. It should work fine with Rich Text Widgets.

Enjoy and let me know if you have any questions!

Thanks,
Josh

Comments

  • jharrisjharris LondonSYS_ADMIN IMG42
    Hi @Ashish_Nelson94

    Thanks for your feedback, I'm glad you like it!

    I experimented with this way of setting it up before posting, but couldn't find a way to do it. Unfortunately it seems like widgets are limited to expanding to their pre-set size, rather than expanding beyond the initial bounds.

    Thanks,
    Josh
  • jharrisjharris LondonSYS_ADMIN IMG42
    Hey @Ashish_Nelson94 and everyone else!

    I've found a solution to expanding widgets beyond their native size and have updated the original post. Now you can fit more widgets into a small space, and expand them to a usable size when you need to interact with them.
Sign In or Register to comment.