support home

Back to website
Welcome
Login  Sign up

Increase height of Cookie Settings modal; some categories can't even be seen without scrolling!

The height of the per-category cookie preferences modal/iframe is currently hard-coded to be 650px high:

image

This may be reasonable for short screens, but this can be a big problem if you have more than 2 categories that you want to collect consent for, especially if you have a moderate amount of text for the intro (widget_intro).

The reason this is a big problem is that if users choose to give consent for individual categories only rather than use of the bulk consent options (clicking "Reject all" or "Accept all"), then we are entirely dependent on the user to:

  1. See and notice each category that we would like their consent for,
  2. Understand the purpose of each category enough that they want to consent to it, and
  3. Actually consent to it by toggling the slider for each category by clicking on it.

Even without "seeing the category" being a concern, it's hard enough to trust/expect that they are going to consent to the lower-down (less essential) categories in the list like Analytics or Ads. But if they can't even see the category in the list, you've just dramatically reduced the chances of them consenting to the lower-down categories in the list (reducing it from maybe a 50% chance that they will consent to something like Analytics or Ads, down to maybe a 1% chance, I'm guessing).

Here is a screenshot illustrating the problem:

image

How would the user even know that there are more than just the 2 categories that are visible?? A user could easily (and would likely) toggle on just the "Experience enhancement" category and click "Save and continue" — without ever even realizing that there are 1 or more other categories not currently visible.

Sure, there is a vertical scrollbar that some users might notice and drag down with their mouse. But, because:

  1. That requires more work/effort on their part (a fundamental problem with scrollbars in general), and
  2. There is a usability problem with the visual design (more below)

, I would estimate that only close to 2% of users will actually scroll down to see the categories that are not initially visible. And if they don't even see some category, then there is a 100% chance that they won't consent to that category.

The best solution, then, would be to get rid of scrollbars altogether and make sure all of the options are on-screen and visible without needing to scroll (see Workaround 2 below).

But first, some thoughts about the usability of the scrollbar in its current state, for cases where it is visible...

Usability problem: Scrollbar not fully visible

Currently, the "Save and continue" button obscures the bottom part of the scrollbar. As you can see here, the bottom scrollbar arrow isn't even visible:

image

Without that visual cue (without seeing the bottom of the scrollbar), it's hard to tell what % of the scrollbar you are at and whether you need to, or can, scroll down further.

What is the solution to this problem? Here are two possible solutions:

Make .iubenda-iframe-footer to use position: relative (same as header) instead of position: absolute, so that the footer is not included as part of the scrollable content at all:

image

Now you can very clearly see that you are currently viewing 75% of the total viewable content and that you would need to scroll down in order to see the bottom 25% of that content.

Alternatively, if you really want the footer to be included as part of the scrollable content, reduce the width of the footer (or add right-side padding) to less than 100% so that it doesn't cover part of the scrollbar:

image


Workarounds to the main problem of some categories not being visible

The ideal option would be to to make sure all of the options are on-screen and visible without needing to scroll. Lacking built-in support for that, here are 2 possible options that I came up with to achieve that...

Workaround 1: Use CSS to condense the top part of the window. Each of .purposes-top and .purposes-header add an extra, not-very-necessary 24px around the top of the of the "Cookie preferences" heading. So reducing that padding can gain back up to 48px of wasted vertical space that can be used to show more categories in the main part of the window:

image


image


Workaround 2:

It seems like an even better solution would be to change the height to something relative to the viewport height, like 99%, so that it will expand to fill the available height.

Unfortunately I couldn't figure out how to get my CSS to have any effect on #iubenda-iframe or anything within it.

So I ended up using a callback to set inline style on the element via JavaScript instead:

  callback: {
    onCookiePolicyShown: function() {
      iframe = document.querySelector('#iubenda-iframe #iubenda-iframe-popup')
      iframe['style'] = 'height: 99% !important; max-height: 900px !important;'
    },
  }, 

Now the modal window expands to fill the height of the viewport, and you can easily see all categories — even if we were using all 5 categories:

image

Ideal solution

The options above were just workarounds. It would be nice to have an official built-in support for getting it to show all options on screen without needing to scroll.

One solution would be to add a new property to the API which would make setting the height to something other than the default as easy as this:  

per_purpose_modal: {
  height: '99%' // or '650px' or whatever
}
Better yet, a property that made it possible to also set any other styles you wanted at the same time:
per_purpose_modal: {
  styles: "height: 99% !important; max-height: 900px !important;"
} 

Better yet, make it possible to style #iubenda-iframe #iubenda-iframe-popup with CSS directly with a stylesheet (and document how to do so) so we wouldn't need to add or use any special JavaScript API just to customize/tweak the CSS.

  • I figured out how to accomplish my workaround directly with just CSS (no JavaScript needed).


    Because the base Iubenda styles all use !important, though, it makes it a lot harder to override them:


    image


    To override any of the styles that have !important (from where I'm trying to override it) requires you to increase the CSS specificity in another way, by repeating the selector. This is what I ended up with, which seems to work pretty well:

    #iubenda-iframe #iubenda-iframe-popup#iubenda-iframe-popup {
      height: 95% !important;
      max-height: 900px !important;
    }
    
    

     

Login or Signup to post a comment