Question 259727 in Html Question posted in
Some basic documentation can be found here.

Html – Why is this button overflowing out of its div when zooming 200%?

When the page is zoomed at 200%+, the button just goes out its div.

Here is the CSS script:

.login_div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 80%;
    max-width: 800px;
    height: 80%;
    background-color: white;
    border-radius: 6px;
    border: 2px solid #999999;
}

#ValidateLogin {
    background-color: #4B0082;
    color: white;
    border: none;
    padding: 5px 8.6%;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-wrap: wrap;
    text-overflow: ellipsis;
}

I’ve tried to set the overflow as auto, but it didn’t work and the style would look so bad.
Here is how the site renders when zoomed in:
Button below its div

Tags:

2

Answers


  1. 0

    The position absolute feature makes it care about the scrollbar, you need to write it in another method, I can’t help you with the code because I don’t have html structure, but your problem must be caused by position: absolute;.

    Login or Signup to reply.
  2. 0

    Similiar workaround using your css, remove position: absolute;

            .login_div {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            width: 80%;
            max-width: 800px;
            height: 80%;
            background-color: white;
            border-radius: 6px;
            border: 2px solid #999999;
        }

        #ValidateLogin {
            background-color: #4B0082;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            margin-bottom: 31px;
        }
        <div class="login_div">
        <h2>Login Form</h2>
        <p>Enter your credentials:</p>
        <form>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br><br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br><br>
            <button id="ValidateLogin" type="submit">Login</button>
        </form>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search