jQWidgets Forums

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

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

Author

Problem of jqxInput width Posts
May 15, 2018 at 8:19 am Problem of jqxInput width #100190

sizzflair
Participant

Hello,

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”>
<head>
<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>
</head>
<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)’ });
});
</script>
<input type=”text” id=”input1″/>
<input type=”text” id=”input2″/>
<input type=”text” id=”input3″/>
</div>
</body>
</html>

Thanks,
sizzflair.

May 16, 2018 at 10:52 am Problem of jqxInput width #100223

Martin
Participant

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,
Martin

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.