CODEWITHSUNDEEP
htmlcssgoogle-chrome
Konstantin
Konstantin

Reputation: 55

Partially hidden button jumps up when focused in Chrome

I have a form with a submit button positioned absolutely, moved to the bottom-right corner and partially hidden (it looks like quarter-circle on the design). When I place focus on one of the input field and then press TAB to move focus to the button, it jumps up and shifts the entire form content up.

Styles are pretty basic:

<form action="">
   <input type="text" width="100px" placeholder="Text input">
  <button>Submit</button>
</form>

CSS

form {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: #cef;
}

button {
  position: absolute;
  display: block;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
  background: yellow;
}

Here's fiddle: https://jsfiddle.net/4zhL68z0/1/ Chrome version is 54.0.2840.87 (64-bit)

Clipping didn't work, changing placement from bottom: -20px to top: 500px didn't work, so any ideas are welcome.

Upvotes: 0

Views: 312

Answers (2)

Lanka
Lanka

Reputation: 3

Try this. It's work for me.

    button {
       position: absolute;
       display: block;
       height: 100px;
       width: 100px;
       right: 0px;
       bottom: 0px;
       background: yellow;
       -moz-border-radius: 100px 0 0 0;
       -webkit-border-radius: 100px 0 0 0;
      }

Upvotes: 0

Giwan
Giwan

Reputation: 1590

Try putting the button in a container and positioning that absolute. Here's a quick fiddle: https://jsfiddle.net/giwan/4zhL68z0/2/

```

.button-container {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
}

button {
  display: inline-block;
  border-radius: 360px;
  border: none;
  width: 100px;
  height: 100px;
  background: yellow;
}

```

Alternatively you could use an image to get the desired effect on the button.

Upvotes: 1

Related Questions