Search code examples
csscss-floatzurb-foundationsticky

Foundation sticky element disregards float classes

I have a little toggle button in the top right of a long form, that toggles whether the form is editable or not. It's sticky with reference to the top and bottom elements of the form. It works fine when I'm scrolled to the top of the page, but as soon as I get to the point where it becomes sticky, it loses the effect of the float-right class that's attached to it. Here's the code:

<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
    <div class="switch round float-right" data-sticky data-top-anchor="userID:top" 
                data-btm-anchor="password:bottom" data-sticky-on="small">
        <input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
        <p class="help-text align-center" id="editTitle">Edit</p>
    </div>
</div>

Here's what it looks like before and after (the right edge of the picture is the right edge of the grid in both pictures):

Before:

Before it becomes sticky

After:

After it becomes sticky

QUESTION: Why is this happening and how can I fix it?

P.S. I still haven't quite figured out how to make a jsfiddle or codepen thing cause I'm relatively new to web stuff (I usually work back-end, but my new job requires the front-end stuff), so sorry about that.

UPDATE:

I found this answer because I noticed that the .sticky.is-stuck classes set position: fixed in the css. I tried what they said, but that just put my little toggle all the way over to the right side of the window, not the right side of the column. So that's not an option. :/

Solution

  • I figured it out!

    Instead of floating it to the right in a small-4 to take account for all the different sizes of devices, I set the width of the container to be 30px bigger than the actual element's size which was 64px (to account for the padding automatically there because of Foundation). My container code ended up looking like this:

    <div class="columns" style="width: 94px;" data-sticky-container>

    This way, the "column", so to speak, that the sticky thing was in was exactly the size of the element inside of it, and that itself was at the end of the row. Now it fits beautifully on all screen sizes, in the right spot!