Skip to content
This repository has been archived by the owner on Nov 3, 2023. It is now read-only.

Backend css rule for class .w50 not working for checkboxes #8864

Closed
eBlick opened this issue Mar 13, 2018 · 13 comments
Closed

Backend css rule for class .w50 not working for checkboxes #8864

eBlick opened this issue Mar 13, 2018 · 13 comments
Assignees
@leofeyer
Labels
defect
Milestone
4.4.25

Comments

@eBlick
Copy link

eBlick commented Mar 13, 2018

Checkboxes need sometimes more space.
When using .w50 Class for custom backend elements the checkbox is limited to 80px height.
We should use a min-height: 80px instead.

bildschirmfoto 2018-03-13 um 08 23 17

image_1325
@fritzmg
Copy link
Contributor

fritzmg commented Mar 13, 2018

You should use w50 only for single ones. Or use tl_style => 'height:auto'.

@eBlick
Copy link
Author

eBlick commented Mar 14, 2018

Why build a workaround with inline-styles? What's the problem with a CSS change that would work in general?

@leofeyer
Copy link
Member

If we can be sure that min-height works in all browsers and does not cause any side-effects, I'd be in favor of this solution.

@leofeyer leofeyer added this to the 3.5.35 milestone Mar 15, 2018
@Aybee
Copy link
Contributor

Aybee commented Mar 15, 2018

And again it seems to be time for a flexbox solution.

@eBlick
Copy link
Author

eBlick commented Mar 19, 2018

THX

@leofeyer leofeyer removed this from the 3.5.35 milestone Apr 17, 2018
@leofeyer
Copy link
Member

If we can be sure that min-height works in all browsers and does not cause any side-effects

Did anyone test this?

@leofeyer
Copy link
Member

@contao/developers /cc

@eBlick
Copy link
Author

eBlick commented Jul 10, 2018

as far as I am concerned it worked in safari, firefox and chrome in osx environment.

@leofeyer
Copy link
Member

leofeyer commented Sep 7, 2018

We need some more people to test this please. @frontendschlampe @may17 @fritzmg @cliffparnitzky @ausi @Pellinger @netzarbeiter /cc

@leofeyer leofeyer added this to the 4.4.25 milestone Sep 7, 2018
@fritzmg fritzmg mentioned this issue Sep 7, 2018
Merged
@fritzmg
Copy link
Contributor

fritzmg commented Sep 7, 2018 •
edited
Loading

In general this works. Here are two screenshots from Contao 4.5 from FireFox and IE 11 under Windows 10 x64:

w50ff

w50ie11

In this test I added the w50 class to all the widgets within the Stylesheets section of the page layout and changed the height of .w50 to min-height.

Since the height of one w50 element can now be anything, the resulting layout may look a little off, since you will not know how many elements will float to the right (or left) of the w50 element. This may result in some whitespace in odd places - as seen above.

@may17
Copy link

may17 commented Sep 7, 2018

min-height has full browser support see https://caniuse.com/#feat=minmaxwh

@cliffparnitzky
Copy link
Member

I can confirm the test of @fritzmg : used Contao 4.4 in Chrome, Firefox and IE 11

leofeyer pushed a commit to contao/contao that referenced this issue Sep 12, 2018
@fritzmg @leofeyer
Fix CSS for IE11 (see #51)
d4e1e5c 
Description
-----------

While testing contao/core#8864 I noticed that the back end login of Contao 4.5 and 4.6 looks like this in IE 11:

![ie11screenshot](https://user-images.githubusercontent.com/4970961/45218806-1f59dc00-b2a9-11e8-8980-8ea4ba74d291.png)

This is because Contao 4.5 started using the `<main>` element for the `#main` container. However, IE 11 treats this as an _inline_ element by default.

See also necolas/normalize.css#727

I think this should probably also be added to the `reset.css` of the Contao CSS framework?
https://github.com/contao-components/contao/blob/8.0.2/css/reset.css#L55-L57
```diff
-header,footer,nav,section,aside,article,figure,figcaption {
+header,footer,nav,section,aside,article,figure,figcaption,main {
 	display:block;
 }
```

Commits
-------

83e01d1 fix CSS for IE11
6b9f7aa Merge branch '4.6' into ie-fix
leofeyer pushed a commit to contao/core-bundle that referenced this issue Sep 12, 2018
@fritzmg @leofeyer
Fix CSS for IE11 (see #51)
65f398f 
Description
-----------

While testing contao/core#8864 I noticed that the back end login of Contao 4.5 and 4.6 looks like this in IE 11:

![ie11screenshot](https://user-images.githubusercontent.com/4970961/45218806-1f59dc00-b2a9-11e8-8980-8ea4ba74d291.png)

This is because Contao 4.5 started using the `<main>` element for the `#main` container. However, IE 11 treats this as an _inline_ element by default.

See also necolas/normalize.css#727

I think this should probably also be added to the `reset.css` of the Contao CSS framework?
https://github.com/contao-components/contao/blob/8.0.2/css/reset.css#L55-L57
```diff
-header,footer,nav,section,aside,article,figure,figcaption {
+header,footer,nav,section,aside,article,figure,figcaption,main {
 	display:block;
 }
```

Commits
-------

83e01d11 fix CSS for IE11
6b9f7aa5 Merge branch '4.6' into ie-fix
@leofeyer leofeyer self-assigned this Sep 17, 2018
leofeyer added a commit to contao/contao that referenced this issue Sep 17, 2018
@leofeyer
[Core] Use min-height for .w50 widgets in the back end (see contao/co…
a3f4e86 
…re#8864)
@leofeyer
Copy link
Member

Changed in contao/contao@a3f4e86.

leofeyer added a commit to contao/core-bundle that referenced this issue Sep 17, 2018
@leofeyer
[Core] Use min-height for .w50 widgets in the back end (see contao/co…
9b42146 
…re#8864)
leofeyer added a commit to contao/contao that referenced this issue Sep 17, 2018
@leofeyer
[Core] Use min-height for .w50 widgets in the back end (see contao/co…
71dfbbd 
…re#8864)
leofeyer added a commit to contao/core-bundle that referenced this issue Sep 17, 2018
@leofeyer
[Core] Use min-height for .w50 widgets in the back end (see contao/co…
2e4eade 
…re#8864)
@netzarbeiter netzarbeiter mentioned this issue Sep 20, 2018
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@leofeyer leofeyer

Labels
defect
Projects
None yet
Milestone
4.4.25
Development

No branches or pull requests
5 participants
@Aybee @leofeyer @cliffparnitzky @may17 @fritzmg