sticky placement changes when option is chosen

I'm experimenting with the CSS style called position: sticky and I've encountered an issue. Everything works perfectly until the select element is activated, causing the page to scroll back to the original position of the sticky element.

<div style="position: sticky; position: -webkit-sticky; top: 0;">
    <select>
        <option>Option</option>
    </select>
</div>

Here's a link to the issue on CodePen

I searched online for a solution but couldn't find anything addressing this specific problem. Has anyone else experienced this before and found a fix?

Thank you!

Browser used: Chrome 67.0.3396.79

Operating System: Windows 7 Home Premium

Note that sticky positioning works correctly in Firefox.

A bug report related to this issue can be found here: Bug Report Link

csspositionsticky

Answer №1

The issue arises due to its association with a form element. When the element is clicked, the browser automatically scrolls to it if its original position is off-screen. However, Firefox behaves differently and only acts on this if the element itself is out of view.

A potential solution is to utilize position:fixed; instead. Since there are no other elements positioned above it, using sticky in this scenario serves no purpose.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

Pressing a button is a way to select a specific form

I'd like to create a clickable button that can direct users to the form section on the same page. <button type="button" class="btn btn-primary btn-sm"> Go to Form Section </button> ... <form id="form1"> <div class="form-g ...

htmlcssformsbutton

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

I am facing an issue with my website design where the content section overlaps with the banner. This causes the content section to be hidden behind the banner, and I need it brought to the front. The problem specifically lies with the search element on my ...

css

What is the best way to handle HTML files that have the same name as folders?

I am looking to incorporate a News section on my website with the unique URL: mysite.com/news Each news article should be stored in a specific folder named "News" like this: mysite.com/news/2021 However, when I attempt to access the news.html file (witho ...

htmlcss

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

cssrubysinatrahaml

Troubleshooting regex validation issues in a JSFiddle form

Link to JSFiddle I encountered an issue with JSFiddle and I am having trouble figuring out the root cause. My aim is to validate an input using a regex pattern for a person's name. $("document").ready(function() { function validateForm() { var ...

javascriptjqueryhtmlcssjsfiddle

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

htmlcssposition

Tips on how to position a expanding textarea in line with buttons

I need assistance with aligning a textarea that is growing to the left, and action buttons positioned on the right side of the textarea. My goal is to have the action buttons aligned at the bottom, level with the expanding text area. Here is the code snip ...

htmlcssvue.js

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

Element was removed upon clicking only once

Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...

javascriptjquerycsshtml

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

The log out button is unresponsive and does not function properly

I am having trouble positioning the logout button on the left toolbar. I have tried using the position property, but it is not responsive. When I resize the Chrome window, the button disappears. I also attempted to use margin, but that did not work either. ...

css

Adjust the background color of the dropdown menu

I'm struggling to change the background color of the property address picker dropdown from transparent to white. I've been trying different things but can't seem to get it right. Any suggestions? Additionally, I want to change the cursor to ...

jqueryformscss

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...

javascripthtmlcss

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

javascripthtmlcss

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

What is causing the unexpected expansion of the initial column in this table?

Can you figure out why the first column in this sample table is so much wider than the others? <html> <head> <style type="text/css"> table,th, td,{ width:100%; border: 4px solid; border-collapse:collapse; ...

htmlcsshtml-table

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid