CODEWITHSUNDEEP
singularitygs
Madclouds
Madclouds

Reputation: 23

Overlap div past container with clearfix mixen overflow:hidden

I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an @include clearfix; which now includes an overflow:hidden property.

For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:

.container {  //Container for the grid system 
    background: $background-color;        
    max-width: $site-width;
    margin: 0 auto;
    position: relative;
    @include clearfix;
    @include breakpoint($large-break) {
        border-left: 20px solid #fff;
        border-right: 20px solid #fff; 
        width: $site-width; 
    }

    .container {
        border: 0px;
        margin: 0px;
        clear: both;
    }
}


    .left-arrow, .right-arrow {
        position: absolute;
        cursor: pointer;
        margin-top: -20px;
        font-size: 0.8em;
        width: 41px;
        height: 41px;
        top: 50%;
    }
    .left-arrow {
        left: -10px;
        background: url(/images/icons.png) no-repeat -153px -146px;
    }
    .right-arrow {
        right: -10px;
        background: url(/images/icons.png) no-repeat -197px -146px;
    }

Here's a screenshot of the problem:

https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0

Should I be using something other then the clearfix mixin in my container?

Edit: - Added Sassmeister issue as requested

Upvotes: 1

Views: 202

Answers (2)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

Singularity doesn't have its own clearfix mixin.

You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.

The solution is to use another mixin for clearfixing.

Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:

.foo {
  *zoom: 1;
}
.foo:after {
  content: "";
  display: table;
  clear: both;
}

I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.

It has the following benefits over the pie-clearfix:

  1. Shorter output that works for all modern browsers:

    .foo:after {
  content: "";
  display: table;
  clear: both;
}

  2. Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.

    To configure Toolkit for using the extend way apply this in the beginning of your CSS:

    @include toolkit-set('clearfix extend', false);

    To override current setting once use this:

    @include clearfix(true);

    true means the extend methhod, false means the mixin method.

Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.

If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.

Upvotes: 0

scottkellum
scottkellum

Reputation: 590

This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:

@mixin clearfix {
    &:after {
        content: '';
        display: table;
    }
}

see: http://sassmeister.com/gist/099ef72b56365fe8ce07

Upvotes: 1

Related Questions