CODEWITHSUNDEEP
browsermicrosoft-edge
Roel
Roel

Reputation: 3096

Microsoft Edge Status bar is blocking buttons

The status bar of the Edge browser is blocking the buttons on the bottom left of the web application i'm working on. Chrome won't show a status bar because the buttons aren't links (If it would be links the status bar would go out of the way to the right).

In the first place I think Microsoft should do something about this but is there a programatic solution for now?

Edge browser Status bar is blocking the buttons it is showing the status of

Chrome

enter image description here

**edit: I could change the buttons to links with href="#" and an onclick action: this won't show a status bar but I guess there aren't any css solutions so I don't have to change the markup on 100's of pages (it is a very big application and screens have different buttons)...

Upvotes: 2

Views: 4253

Answers (2)

Sergio
Sergio

Reputation: 1

I also have this problem and the date is April 2019. Apparently, the Microsoft solution is to dump Edge in favor of a Chrome-based browser. I like Edge. Anyway, the propsed solution to reposition the divs is ridiculous. If your buttons are at the bottom of the page, then simply add padding to the bottom of the containing div to keep the content higher than absolute bottom of page:

.divContainer { padding: 0px 0px 24px 0px; }

this works for me. Essentially, we move the page bottom down 24 pixels.

Upvotes: 0

Sampson
Sampson

Reputation: 268364

This is a known issue with Microsoft Edge. Our team has investigated the matter, and will be addressing it in a future release. I will update this answer when that release has shipped.

For now, you may find that a subtle adjustment to your UI could avoid this issue altogether. For instance, you could define a region that, when entered, causes the buttons to elevate above the known tool-tip area:

enter image description here

In the above example I defined a region that contains the links:

<div class="footer-links">
    <a href="/informatie">Informatie</a> 
    <a href="/wijzigen">Wijzigen</a>
    <a href="/verwijderen">Verwijderen</a>
</div>

I then added some padding to create space between the top of .footer-links, and the individual <a> elements:

.footer-links {
    padding: 3em 1em 1em 1em;
}

Lastly, I transition the elements up when their container is hovered:

.footer-links a {
    display: inline-block;
    transition: transform .75s;
}

.footer-links:hover a {
    transform: translateY(-2em);
}

You could accomplish the transform using margins, or another method if you like. One other subtle effect I added was to delay the transition for the second and third elements:

.footer-links a:nth-child(2) {
    transition-delay: .25s;
}

.footer-links a:nth-child(3) {
    transition-delay: .50s;
}

I hope this helps.

Upvotes: 1

Related Questions