0

I've converted a bootstrap date module to use only Angular(still in the middle of the conversion). Here is the demo page with the behavior I want to fix.

Click on the input field under "Your Date Range Picker" to see the daterangepicker. I've attached a screenshot of what you should see:

This is what it looks like now, the three elements should be side-by-side, instead of on top of each other like they are here.

The issue I'm having is that the wrapper(div.daterangepickerdropdown-menu.opensright.ltr.show-calendar) is set to width:auto, but the three child elements, ranges, left calendar, and right calendar are set to float:left. For some reason they end up wrapping so that they stack vertically, and I can't figure out why they aren't side by side horizontally. I've tried playing with clears, setting overflow:hidden to the wrapper, and nothing seems to work. I've spent 4+ hours with the chrome debugger playing with css rules and can't get the wrapper to widen as much as necessary to put all three child elements horizontally.

For a comparison of what it should look like this.

user594044
  • 255
  • 2
  • 4
  • 13

2 Answers2

1

You have nested your dropdown menu within a div with class col-md-4, which has a defined width.

The working demo has placed the dropdown menu outside of this column.

Even though you are positioning it absolutely it is still inheriting the max-width of the column. (you can see this by setting the dropdown menu width to 50%)

You can solve this by changing your HTML structure and positioning your dropdown menu in a similar way to the demo, or by overriding the width using a fixed setting which will adequately fit the child elements, e.g. width: 170%.

sol
  • 22,311
  • 6
  • 42
  • 59
  • I thought since I am setting `width:auto` on the dropdown menu, that would override what it is inheriting. Do you know what that is not the case? – user594044 Dec 30 '16 at 16:10
  • 1
    You are correct in that width:auto will expand the menu to fit the elements inside - but it can only expand to occupy the same width as its containing block, in this case col-md-4. More here --> http://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent – sol Dec 30 '16 at 16:13
  • Thank you so much. I added a wrapper div around the dropdown menu and set that to position relative, so the dropdown menu would stop inheriting anything outside of the daterange-picker element(to prevent interaction between my module and anything outside of it). – user594044 Dec 30 '16 at 16:23
1

The problem here is the following container:

<div class="col-md-4 col-md-offset-2 demo"></div>

You should remove position-relative from the above element so that your date-picker does not inherit properties from it.

Alternatively, you can apply position: relative to the <div class="row"></div> element just above the .demo element and align your date-picker accordingly.

nashcheez
  • 5,067
  • 1
  • 27
  • 53