Tradeshift / tradeshift-ui

The Tradeshift UI Library & Framework
https://ui.tradeshift.com
Other
33 stars 45 forks source link

IE11 asides button styling #861

Closed RimanDk closed 5 years ago

RimanDk commented 5 years ago

Describe the bug Using the coding panel, the "submit" button at the bottom of the panel stretches to the width of the window and is truncated at the edge of the aside. This puts the text out of reach of the user and gives the correct impression that the UI is broken.

To reproduce Using IE11, go to sandbox.tradeshift.com and log in with cpr+germany+admin@tradeshift.com/12345Trade. Go to the TaskManager and pick an invoice that needs to be coded. Once Tradeshift.Invoice has loaded the document, scroll down to an uncoded line and press "Add coding"

Expected behavior The submit button should stay within the frame of the aside and the text should be legible

Framework usage The panel is made in Angular and is being called by an app (Invoice) written in React+Redux

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Asides1

Kian-Esmaeilpour commented 5 years ago

We need to fix document on this to let developers know how they can create a fixed aside footer.

<aside data-ts="Aside">
    <div data-ts="Panel">
        <p>Aside content.</p>
    </div>
    <footer>
        <p>footer.</p>
    </footer>
</aside>