Fix back end layout problems in various browsers #1823
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@leofeyer I have made a new proposal for Contao 4.9 here. The changes I made also unify the height of selects, as they were different from text input fields before. And it increases the margins for selects as well, as they were one pixel less than the text input fields before. |
leofeyer
reviewed
Jun 19, 2020
| min-height:46px; | ||
| min-height:47px; | ||
| } | ||
| .cbx.m12 { |
There was a problem hiding this comment.
Since the class attribute will be class="w50 m12 widget cbx", is it more performant to use .m12.cbx instead of .cbx.m12 or does it not matter at all? @ausi /cc
There was a problem hiding this comment.
I didn't even know that this might matter in any way? 😁
There was a problem hiding this comment.
The order of CSS class names does not matter for performance.
leofeyer
approved these changes
Jun 19, 2020
There was a problem hiding this comment.
Looks good to me. 👍
Although I have to say that I am a little disappointed that we are not switching to CSS grid as suggested by @m-vo in #1824 (comment). 😄
We could still do this in an upcoming PR, though. 😄 |
|
Thank you @fritzmg. |
leofeyer
added a commit
that referenced
this pull request
Jun 25, 2020
Description ----------- This is a follow-up PR to #1823. It seems that the browsers do not like the `height: 30px` for search fields. 🤷♂️ <img width="555" alt="" src="https://user-images.githubusercontent.com/1192057/85741953-26aedb80-b703-11ea-9f4a-228f44a410fe.png"> <img width="466" alt="" src="https://user-images.githubusercontent.com/1192057/85741985-2c0c2600-b703-11ea-9ca9-33107a1c5717.png"> <img width="480" alt="" src="https://user-images.githubusercontent.com/1192057/85742013-30d0da00-b703-11ea-81ff-395a0a79f1d5.png"> # With the fix from this PR <img width="533" alt="" src="https://user-images.githubusercontent.com/1192057/85742104-434b1380-b703-11ea-91a5-41c6ca69b2c0.png"> <img width="448" alt="" src="https://user-images.githubusercontent.com/1192057/85742125-480fc780-b703-11ea-8e86-53286820d3f5.png"> <img width="438" alt="" src="https://user-images.githubusercontent.com/1192057/85742154-4c3be500-b703-11ea-9004-6b99396a911b.png"> @fritzmg Can you please check if this applies to the Windows browsers as well? Commits ------- 9d24dcc Fix the search field height in the back end
fritzmg
added a commit
to fritzmg/contao
that referenced
this pull request
Jun 26, 2020
fritzmg
added a commit
to fritzmg/contao
that referenced
this pull request
Jun 26, 2020
leofeyer
pushed a commit
that referenced
this pull request
Jun 29, 2020
Description ----------- This is a follow up to #1823, #1875 and #1877 Some previous changes have been reverted, some new changes have been added. * Text inputs and selects and submit buttons now have the same height (and they are aligned correctly). * Layout does not break for certain `w50` widget combinations in any browser, zoom level and dppx combination that I have tested (tested with newest Firefox, Chrome and Edge). @leofeyer can you test these changes in Safari too please? Hopefully this is now fixed for good and we don't have to touch it again, until we re-do the whole thing with CSS grids 😁 If everything checks out, I'll update the PR for Contao 4.4 accordingly. Commits ------- 34cd111 revert some changes from #1823 8f2f282 change the back end layout yet again 7e492ab add minified basic.css 6dd338c some further adjustments for firefox
leofeyer
pushed a commit
to contao/core-bundle
that referenced
this pull request
Jun 29, 2020
Description ----------- This is a follow up to contao/contao#1823, contao/contao#1875 and contao/contao#1877 Some previous changes have been reverted, some new changes have been added. * Text inputs and selects and submit buttons now have the same height (and they are aligned correctly). * Layout does not break for certain `w50` widget combinations in any browser, zoom level and dppx combination that I have tested (tested with newest Firefox, Chrome and Edge). @leofeyer can you test these changes in Safari too please? Hopefully this is now fixed for good and we don't have to touch it again, until we re-do the whole thing with CSS grids 😁 If everything checks out, I'll update the PR for Contao 4.4 accordingly. Commits ------- 34cd1115 revert some changes from #1823 8f2f282a change the back end layout yet again 7e492abf add minified basic.css 6dd338c4 some further adjustments for firefox
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This fixes the layout problems mentioned in #1721 in various browsers, zoom levels and device pixel density settings. Tested on the recent versions of Firefox, Chrome and Edge under Windows.