JavaScript Input

Set the width property of the jqxInput. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class='wrapper'>
  <p>Statically Added</p>
  <input type='text' id='statically_added'>
</div>

<div class='wrapper' id='first_dynamic'>
  <p>Dynamically Added</p>
</div>

<div class='wrapper' id='second_dynamic_outer'>
  <p>Doubly Dynamically Added</p>
</div>

<div class='wrapper'>
  <p>Statically Added Double</p>
  <div id='double_static_inner'>
    <input type='text' id='statically_added_double'>
  </div>
</div>

CSS

input#statically_added,
input#dynamically_added,
input#doubly_dynamic,
input#statically_added_double {
  border: 1px solid black;
  padding: 3px;
  box-sizing: border-box;
  width: 100%;
}

.wrapper {
  width: 350px;
  background-color: #CCD;
  height: 120px;
  margin-bottom: 20px;
  position: relative;
}

#second_dynamic_inner, #double_static_inner {
  width: 100%;
  background-color: #CEC;
  height: 50px;
  padding-top: 5px;
}

JavaScript

$('#statically_added').jqxInput({
  width: '100%',
})

var input_1 = $('<input>').attr('type', 'text').attr('id', 'dynamically_added');
$('#first_dynamic').append(input_1);
input_1.jqxInput({
  width: '100%',
});

var inner_wrapper = $('<div>').attr('id', 'second_dynamic_inner');
var input_2 = $('<input>').attr('type', 'text').attr('id', 'doubly_dynamic');
inner_wrapper.append(input_2);
input_2.jqxInput({
  width: '100%',
});
$('#second_dynamic_outer').append(inner_wrapper);

$('#statically_added_double').jqxInput({
  width: '100%',
})