[DatePicker] Date display width is 270 but component width is 310 about mui-x HOT 17 CLOSED

@mbrookes we should be using border-box 99% of the time IMO. Everyone does it (CSS frameworks, libraries, etc) except for specific use cases where content-box is needed.

from mui-x.

@nathanmarks I had to create mui/material-ui#4263 to second your statement :)

we should be using border-box for most things. (Which would avoid issues like this, which sprout up every now and then)

from mui-x.

I am having the same issue. I think width 100% is the best solution

from mui-x.

used following workaround until the issue is fixed either way.

div[mode="portrait"] {
  box-sizing: content-box !important;
}

I found no other way to give the selector a more narrow scope. Hope that helps in the meanwhile.

from mui-x.

I have the feeling that fixing mui/material-ui#4422 is way more work than adding the box-sizing to the DatePicker. So could you maybe just add that until mui/material-ui#4422 is fixed? Otherwise we would have to wait too long for a fix as there is no workaround possible at the moment ( The div[mode="portait"] selector doesn't match in my case).

from mui-x.

Not sure what you're seeing in that case. Date display has width 270, but padding 20 (total 310).

Does the docs site look okay to you?

http://www.material-ui.com/#/components/date-picker

from mui-x.

Docs look fine but it's definitely not working in my project and I haven't set any style on the DatePicker.

from mui-x.

I think I figured out what's happening.

It looks like the date display is expecting box-sizing: content-box but in my CSS reset I set:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

Am I interpreting this correctly? Do you guys actually use content-box? It's a very old and frankly poor standard that makes layout very difficult and should only be used in select instances of which this is not one.

Why not just make the width on the date display 100% rather than fixing it to 270 and using padding to fill out the space?

from mui-x.

Well this doesn't make a whole lot of sense then. The date display component is fixed to 270 but the main component width is 310. If you're not using content-box then it isn't going to fill the space and padding won't change that.

from mui-x.

@clayne11 What are you responding to? I was just mentioning to @mbrookes that even regardless of this specific case, IMO we should be using border-box for most things. (Which would avoid issues like this, which sprout up every now and then)

from mui-x.

@nathanmarks sorry I misunderstood.

If I add box-sizing: content-box to the date display it fixes the issue. I think we should switch the width to 100% though. Will you guys accept a PR if I push one?

from mui-x.

@clayne11 Opening the discussion witha nother contributor here: mui/material-ui#4263 (comment)

from mui-x.

Adding boxSizing: 'content-box' in styles.root object at DateDisplay.js solved this problem for me (both landscape and portrait displays), i think it doesn't mess anything as setting it's width or height to 100%. I'm using bootstrap ^3.

from mui-x.

@FernandoFigueroa Fixing the date picker is very simple. We've concluded at this point that using border-box throughout the library is safer and more predictable than content-box. The issue is that there is no way to fix the date picker without changing the source for material-ui as far as I can tell.

from mui-x.

Sure @clayne11, maybe providing an style prop for the dialog container would do the trick? I mean, it involves changing the date picker code, but it'll aloud to do whatever we want without compromising material-ui source. Separating the styles object for landscape and portrait will remove the logic performed when this object if first set to then decide in the render if it'll load with portrait/landscape styles.

from mui-x.

I'm OK with that. As long as a solution exists for me to style it that works for me.

It would also be nice to have a className on the date picker itself (not the root) so that we can style nested components within the date picker in case something like this comes up again in a different nested part of the date picker.

Since the date picker doesn't render into the DOM tree, but onto the body, there's no other reliable way to style it. Usually a wrapper div with a class would work but because of how this component renders it's not a viable solution.

from mui-x.

@hmeerlo div[mode="portrait"] selector works only if you set mode property on the DatePicker explicitly

from mui-x.