Липкий элемент Foundation игнорирует классы с плавающей точкой - PullRequest
Новая
       11

Липкий элемент Foundation игнорирует классы с плавающей точкой

0 голосов
/ 27 апреля 2018

У меня есть маленькая кнопка в правом верхнем углу длинной формы, которая переключает, является ли форма редактируемой или нет. Это липко со ссылкой на верхний и нижний элементы формы. Он прекрасно работает, когда я прокручиваюсь до верхней части страницы, но как только я дохожу до точки, где он становится липким, он теряет эффект класса float-right, который к нему привязан. Вот код: 

<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>

Вот как это выглядит до и после (правый край изображения является правым краем сетки на обоих изображениях):

До:

Before it becomes sticky

После того, как:

After it becomes sticky

ВОПРОС: Почему это происходит и как я могу это исправить?

P.S. Я до сих пор не совсем понял, как сделать jsfiddle или codepen, потому что я относительно новичок в веб-вещах (я обычно работаю в фоновом режиме, но моя новая работа требует внешнего интерфейса), так что извините за это.

UPDATE:

Я нашел этот ответ , потому что я заметил, что классы .sticky.is-stuck устанавливают position: fixed в css. Я попробовал то, что они сказали, но это просто перевело мой маленький переключатель к правой стороне окна, а не к правой стороне колонны. Так что это не вариант. : /

1 Ответ

0 голосов
/ 27 апреля 2018

Я понял это!

Вместо того, чтобы перемещать его вправо в маленьком 4, чтобы учесть все различные размеры устройств, я установил ширину контейнера на 30 пикселей больше, чем фактический размер элемента, который был 64 пикселя (чтобы учесть заполнение там автоматически из-за основания). Мой код контейнера в итоге выглядел так: 

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

Таким образом, «столбец», так сказать, в котором была липкая вещь, точно соответствовала размеру элемента внутри нее, а сама эта составляла end строки. Теперь он идеально подходит для всех размеров экрана, в нужном месте!

...