This topic contains 1 reply, has 2 voices, and was last updated by  Martin 2 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Problem of jqxInput width #100190



    I found problem ‘jqxInput’ with 5.7.2 version.
    CSS calc() function is not applied in width property.
    Please check the following sources.

    <!DOCTYPE html>
    <html lang=”en”>
    <title id=’Description’>The sample illustrates the basic functionality of the jqxInput widget. The jqxInput widget provides suggestions while you type into the field. The datasource is a simple JavaScript array, provided to the widget using the “source” property. </title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
    <body class=’default’>
    <div id=’content’>
    <script type=”text/javascript”>
    $(document).ready(function () {
    //it works(width: 200)
    $(“#input1”).jqxInput({ height: 25, width: 200 });
    //it works(width: ‘calc(100%)’)
    $(“#input2”).jqxInput({ height: 25, width: ‘calc(100%)’ });
    //it doesn’t works(width: ‘calc(100% – 30px’)
    $(“#input3″).jqxInput({ height: 25, width: ‘calc(100% – 30px)’ });
    <input type=”text” id=”input1″/>
    <input type=”text” id=”input2″/>
    <input type=”text” id=”input3″/>


    Problem of jqxInput width #100223


    Hello sizzflair,

    Yes, this is because jqxInput’s width property is of type Number/String and it evaluates the calc function as a string.
    You can still set the input’s width with calc() in the css.

    Best Regards,

    jQWidgets Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.