S4S Mini Cookie "crashing" the side of the page in UIkit

Classic General
1

I’ve recently picked up Stacks4Stacks Mini Cookie. It works fine with most frameworks/themes but I’m hitting an issue with UIkit: testpage | Template Repo

On the page is only the Uikit style stack and Mini Cookie, which is set to full-width bottom. As you can see it’s crashing the width of the page on the right-hand side.

I’ve tried all manner of custom CSS without any luck. The best I can come up with so far is to set the width to 98vw!important. This works on wider screens but as the screen reduces in width the container once again crashes the side.

CSS for the Mini Cookie wrapper when using UIkit…

#mini_cookie_wrapper_stacks_in_43 {
    display: inline-block;
    background: rgba(255, 255, 255, 1.00);
    border-radius: 0.5rem;
    box-shadow: 0 0 10px 3px rgb(0 0 0 / 20%);
    margin: 2rem;
    padding: 1rem;
    max-height: 100vh;
    max-width: 50rem;
    overflow: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    display: block;
    margin: 0;
    max-width: none;
    width: 100%;
    border-radius: 0;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    z-index: 99999;
}

I’d be interested to hear if anyone else experiences this, with either UIkit or any other framework, and/or if anyone can think of a way to stop it happening.

Thanks.

2

Update: I found a fit with the following custom CSS, but would still be curious to hear if anyone else has seen this, or even if anyone can work out why it’s happening.

.mini_cookie_button {
    margin-right: 40px !important;
}
3

I don’t see your custom CSS code in the page you’ve given us here. So evidently whatever you were trying offline in RapidWeaver 8 preview never made it through to the published website. And your popup container looks just fine in Firefox v94 - including at different screen widths and using the mobile simulation tools. I see no overrun, with it going off the edge of the page. No horizontal scroll bars or anything like that:

Screenshot 2021-11-08 at 09.39.27
Screenshot 2021-11-08 at 09.39.271730×1500 84.9 KB

Ordinarily, zero custom CSS code is needed to make this work. It only uses simple CSS code to control the widths, positioning and fixture on the page.

Perhaps start with the basics. Do a full republish of this page (File > Mark Page As Changed). Then navigate to the page in your web browser and purge the cache. Perhaps try a couple of different web browsers and see if you can replicate this overrun of the content in one of them.

What is the purpose of the divisional container with an ID of blur that encloses all of your page elements? Is that some sort of animation loading effect? Try disabling that to see if it has any effect on calculations or causes display / layout bugs in RapidWeaver 8 preview.

Same with the stack with a class of uk-offcanvas-content. Just by going with its name ‘off canvas’, that sounds to me like it is for putting content outside of the normal viewport of the page - like a popup mobile menu, social sharing buttons, or lightbox? Put my stack outside of this stack and try again.

Where is your MiniCookie content that tells the user about your privacy policy and directs them to use the buttons? Without content inside the flexbox container, things are going to look odd and become misaligned. CSS Flexbox often relies on content being inside each of the child nodes, to get the correct amount of “stretch”.

If you have not done so yet, download my sample RapidWeaver 8 project file and open that. There is a link to it on the product page. You will see some examples in there to copy and paste into your website. These already contain dummy content and buttons to practice with.

4

I fixed the problem. Well, adding a random third party stack to the page fixed the problem, found purely by chance.

I’m told the issue is due to the way that UIkit does its layout stuff.

All very techie and over my head, but a nice clean fix is found so all good here.

This is purely a test/demo. I purposely kept the page content to a minimum.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.