Need information on Calendar positioning

[dcwmark]

I know I am reading the documentation and code correctly. I am trying to have the calendar 'popup' below the 'date input' with the left side of the calendar aligning to the left of the 'date input'.

The onClick() method in DateTimeField.js hard coded the "right: 40" and "left: 'auto'".

Is there a way I may change that to something akin to "right: 'auto'" and "left: 3px (about)"?

Cordially, Entaro Adun.

P.S.

May I propose to add to props.direction four options: 'top left', 'top right', 'bottom left', and 'bottom right'? Where "bottom left" would be something like: var thisDim = this.getDOMNode().getBoundingClientRect(); style: { top: thisDim.bottom, left: thisDim.left + 3 right: 'auto' } Along this line.

[malliapi]

Hi entaro,

Using !important will override the hard coded values.

On 20 May 2015, at 18:57, Entaro Adun [email protected] wrote:

I know I am reading the documentation and code correctly. I am trying to have the calendar 'popup' below the 'date input' with the left side of the calendar aligning to the left of the 'date input'.

The onClick() method in DateTimeField.js hard coded the "right: 40" and "left: 'auto'".

Is there a way I may change that to something akin to "right: 'auto'" and "left: 3px (about)"?

Cordially, Entaro Adun.

— Reply to this email directly or view it on GitHub.

[dcwmark]

Hello Chris,

In my project, we have usages of the datetimepicker in multiple pages. Using css override alone, would proliferate this css override quite a bit. As well, our project in an internal platform tool that allows our web pages designers to drag and drop components as they create their pages. Using 'just' css overrides, would require them to call us to adjust the css everytime they drag and drop this component. It would not be workable.

May I propose adding the following logic and if you approve, I can submit a pull request for it.

  if (this.props.direction === 'bottomLeft') {
    styles.top = thisDim.bottom - parentDim.top;
    styles.left = thisDim.left - parentDim.left;
    classes.top = false;
    classes.bottom = true;
  } else if (this.props.direction === 'topLeft') {
    styles.bottom = parentDim.bottom - thisDim.top;
    styles.left = thisDim.left - parentDim.left;
    styles.top = 'auto';
    classes.top = true;
    classes.bottom = false;
    classes['pull-left'] = true;
  } else if (this.props.direction === 'bottomRight') {
    styles.top = thisDim.bottom - parentDim.top;
    styles.right = parentDim.right - thisDim.right + dtpButtonDim.width;
    styles.left = 'auto';
    styles.bottom = 'auto';
    classes.top = false;
    classes.bottom = true;
    classes['pull-right'] = true;
  } else /* (this.props.direction === 'topRight') */ {
    styles.bottom = parentDim.bottom - thisDim.top;
    styles.right = parentDim.right - thisDim.right + dtpButtonDim.width;
    styles.top = 'auto';
    styles.left = 'auto';
    classes.top = true;
    classes.bottom = false;
    classes['pull-right'] = true;
  }

[dcwmark]

Sorry, left this out:

  var thisDim = this.getDOMNode().getBoundingClientRect();
  var parentDim = this.getDOMNode().offsetParent.getBoundingClientRect();
  var dtpButtonDim = this.refs.dtpbutton.getDOMNode().getBoundingClientRect();

[crobinson42]

see #155