custome control in lightbox

Scheduler Javascript
#1

I have added two custom controls in the lightbox which is color and number input respectively.
But both of the controls doesn’t display properly in IE11 and Chrome.

// IE11

// Chrome

// HTML

[code]

    <div style="height: 509px; width: 100%;">
        <%= Me.Scheduler.Render()%>
    </div>

    <script type="text/javascript">
        scheduler.form_blocks["number"] = {
            render: function (sns) {
                return "<div class='dhx_cal_block'><input type='number' min='1'/></div>";
            },
            set_value: function (node, value, ev) {
                node.firstChild.value = value || "";
            },
            get_value: function (node, ev) {
                return node.firstChild.value;
            },
            focus: function (node) {
                var a = node; scheduler._focus(a, true);
            }
        }

        scheduler.form_blocks["color"] = {
            render: function (sns) {
                return "<div class='dhx_cal_block'><input type='color'/></div>";
            },
            set_value: function (node, value, ev) {
                node.firstChild.value = value || "";
            },
            get_value: function (node, ev) {
                return node.firstChild.value;
            },
            focus: function (node) {
                var a = node; scheduler._focus(a, true);
            }
        }
    </script>

</form>
[/code]

[code]Public Class LightboxNumber
Inherits LightboxField
Public Sub New(name As String, Optional label As String = Nothing)
MyBase.New(name, label)
Me.Height = 60
Me.Type = “number”
End Sub
End Class

Public Class LightboxColor
Inherits LightboxField
Public Sub New(name As String, Optional label As String = Nothing)
MyBase.New(name, label)
Me.Height = 60
Me.Type = “color”
End Sub
End Class[/code]

#2

Unfortunately, your screens doesn’t show. Could you describe your problem?
It seems your controls shows correctly in Chrome.

778×236 8.82 KB

But possibly you shouldn’t use such input types in IE11:
caniuse.com/#search=Color%20input%20type
caniuse.com/#search=Number%20input%20type

#3

For Chrome, the distance between the text and control is too close. How can i align them properly as per image below?

#4

Unfortunately, your image doesn’t show.
You can add padding to your input container or just use “dhx_cal_ltext” class.
For example:

<div class='dhx_cal_block dhx_cal_ltext'><input type='color'/></div>
#5

ok. thanks…