Inputdatetime aspect

Posted by: kisar on 26 May 2019, 11:58 pm EST

  • Posted 26 May 2019, 11:58 pm EST

    Hi i’m trying to use the inputdatetime component,

    but i can’t adapt it to the environment,

    i tried the properties:

    .Height(“26px”)

    .HtmlAttributes(new { style=“margin - top:-6px” })

    or

    var attributes=new Dictionary<string,string>();

    attributes.Add(“class”, “form-control form-control-sm mb-0”);

    attributes.Add(“style”, “margin-top:-6px”);

    .HtmlAttributes(attributes)

    Nothing works.

    Can you help me to understand how is better to proceed?

  • Posted 27 May 2019, 2:54 pm EST

    Hi Kisar,

    As default, the InputDate height might varies for various build version. If you would like to reduce the Control height from the default height, we need to add the following CSS:

    <style>
        #date .wj-form-control{
            min-height:1.2em;
        }
        #date .wj-btn{
            min-height:1.2em;
        }
    </style>
    <div style="padding:20px 0">
        @Html.C1().InputDate().Id("date").IsRequired(false)
    </div>
    

    Hope it helps!

    Regards,

    Manish Gupta

  • Posted 27 May 2019, 4:53 pm EST

    Thank you, but nothing change,

    however the problem is general,

    i need to reduce the height of all components

  • Posted 28 May 2019, 2:35 pm EST

    Hello Kisar,

    It seems that you have some added some additional CSS or Bootstrap. In this case, we might need to adjust the min-height accordingly. Please try to set the min-height to 1em.

    Please find the attached sample which have the InputDate height to 26px from 30px.

    Hope it helps! If the issue persists, please modify the attached sample depicting your issue so that we may find the issue cause and assist you accordingly.

    Regards,

    Manish Gupta

    InputDate-HeightReduce.zip

  • Posted 28 May 2019, 11:28 pm EST

    Thank you,

    I tried your project and I have confirmation

    that the minimum height of the component is 29px

    less doesn’t work.

    At least now I know for sure.

    thanx

  • Posted 29 May 2019, 5:33 pm EST - Updated 29 September 2022, 1:53 am EST

    Hi Kisar,

    Here is the attached image which shows that the height of control is 26px for InputDate with the latest build 2019v1.300 for the previously shared sample. The browser is Chrome.

    However, there are more parameter to reduce the control height such as font-size of control, padding for the InputBox.

    Please try the following CSS:

    <style>
        #date{
            font-size: 12px;
        }
        #date .wj-form-control{
            min-height:1em;
            padding:1px 8px;
        }
        #date .wj-btn{
            min-height:1em;
        }
    </style>
    

    Please let us know which C1 Build version you are using and the browser information with the OS information.

    Regards,

    Manish Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels