Problem with hidden input field

[micc83]

As i told you for now i could find only a few bugs. I don't understand why you have added this code:

// Hide source element
// Instead of doing a display:none, we would rather
// make the element invisible
// and adjust the margin
this.element.css({
    visibility: 'hidden',
    top: '-' + this.element.outerHeight(true) + 'px',
    position: 'relative',
    zIndex: '-1',
    left: '-100px'
});

Cause now the inline-block element is not actually put inline with the next block as you can see in the following figure:

[swashata]

I choose to make the element invisible instead of display: none because how some validators (like this one: https://github.com/posabsolute/jQuery-Validation-Engine ) detects elements for validation. It simply passes a jQuery filter elm.is(':visible') to see if the element is visible in the DOM in order to proceed with the validation, otherwise it just ignores it.

I think a possible solution would be to make the elm.width = 100px and elm.height = 50px (before changing the CSS) so it hides completely behind the font picker.

[micc83]

What about givin it

position: relative;
display: inline-block !important;
left: -9999px;
height: 0px;
width: 0px;

than? Would that create any problem with validators?

[swashata]

Making it go left to -9999px will cause some of the validators to create the validation tooltip (or message) at -9999px so it will never be shown. It's best to position the original element at the top-left of the picker. Also do check if making the height and width 0px will cause elm.is(':visible') to return false. If it does, then we have to give some width and height to it (perhaps 1px).

[micc83]

Allright, i checked and with width and height set to 0 it pass the is(':visibile') statement. Check it out: aef05b692f7ee15615ad577670646aa2dc1c86aa

[swashata]

Works a charm. Also add a visibility: 'hidden' for completeness and avoiding weird behavior on some browser (where some input element might have border, padding or margin etc).

[micc83]

Already there, github just folded it cause it was unchanged. I guess we can close the issue :smile:

[swashata]

Ah! I was just thinking what if the element validation tooltip appears on say bottom/center position? For that calculation the script needs to know the height and width of the input element. So I think giving width and height value the same as the picker would be better than giving 0. This approach will not break anything since it will be hidden behind the picker and will still provide exact measurement for the tooltip. Let me know what you think.

[micc83]

I guess you are right. I'm stuck with a customer at the moment. Could you fix it?

[swashata]

Sure, I will fix it tonight.