I have used Spectrum color picker in a CRM form as a web resource, which I think is effectively an IFRAME and I would like the contents of the IFRAME (a div) to pop over its limits, over on the parent document. I don't want the IFRAME itself to acommodate the size of the div that's expanding because that'll make the form ugly.
Here's the HTML:
<html>
<head>
<title>Color Picker</title>
<script src="../Scripts/jquery.1.12.3.min.js"></script>
<script src="../Spectrum/spectrum.js"></script>
<link rel="stylesheet" href="../Spectrum/spectrum.css" />
<script>
$(document)
.ready(function () {
$("#full").spectrum({
color: "#ECC",
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: false,
showSelectionPalette: false,
maxSelectionSize: 10,
preferredFormat: "hex",
localStorageKey: "spectrum.demo",
move: function (color) {
},
show: function () {
},
beforeShow: function () {
},
hide: function () {
},
change: function() {
}
});
});
</script>
</head>
<body>
<input type='text' id="full" style="position:absolute;"/>
</body>
</html>
I thought of playing with z-index but that seems to be working only for images.
Here's what this produces in the form:
I would like the div that the blue arrow is pointing at, to pop over the field below.
Is this possible ?
