Fixed button positions in all browsers #282
Conversation
| if(navigator.platform.match('Win') !== null){ | ||
| $(".roundsymbol").addClass("windowsroundsymbol"); | ||
| $("#small-icons .status-icon").css("line-height","2.2rem"); | ||
| } |
There was a problem hiding this comment.
Is this something that could be done in CSS only? I'd rather only have JS doing this kind of thing as a last resort.
There was a problem hiding this comment.
It doesnt look like I can do this exact thing in CSS.
I can spend some time looking into a different solution to just changing line height in different browsers if you want?
There was a problem hiding this comment.
So in what situation exactly do we need this change? Right now this would affect all browsers not on Windows?
python-main.js
Outdated
| $(".roundsymbol").css("line-height","3.7rem"); | ||
| $("#small-icons .status-icon").css("line-height","2.2rem"); |
There was a problem hiding this comment.
Instead of having the styles applied directly in the JS, could we have CSS classes in the CSS file named after the issue (roundtsymbol-firefox-win, or something like that) and then use JS to apply them?
2 participants
Currently, the beta options and help buttons are too high on firefox on mac and are too low on IE11. In addition to this, the small icons are too high in all windows browsers. This PR fixes that by adding the class 'windowsroundsymbol' to all divs with the class 'roundsymbol' and changing the line-height of the small-icons if the python editor is opened in a windows browser. In style.css the line-height of all divs with the class 'windowsroundsymbol' is changed when in firefox.
Screenshot of buttons before:
MacOS Firefox:
IE11:
Screenshots of buttons after:
Chrome
IE10
IE11
MacOS Firefox
Safari
Windows 7 Firefox
