<b:inputText tags="true" /> has wrong width when using the tags attribute and inside of a <b:panelGrid />

[ghost]

Bootsfaces Version 1.2.0

Using the tags attribute in an <b:inputText /> component, I got code like this:

<div id="..." class="form-group">
  <div class="bootstrap-tagsinput">  
    <input placeholder="" size="10" type="text"></div>
    <input id="..." name="..." class="form-control" data-role="tagsinput" style="display: none" type="text">
  </div>
</div>

Using this inside of a <b:panelGrid />, the component is not rendered as expected (does not fill out the full space of the given width by the panelGrid).

The problem is that the second div (of class bootstrap-tagsinput) does not have the expected width value of 100%.

Workaround:

add an id valuelistinput to the <b:inputText /> component and set the width by jquery (which is shipped with bootsfaces):

<script type="text/javascript">
$(document).ready(function(){
  $("[id='form:valuelistinput']").children().css("width", "100%");
});
</script>

Nevertheless, this is a bug in combination with the panelGrid component (I suppose a conflict of the css classes), so I post this here.

[stephanrauh]

Thanks for both the workaround and the detailed analysis!

[stephanrauh]

IMHO the CSS class form-control is missing.

[stephanrauh]

Seems the JavaScript library has been abandoned two years ago. I've forked it and patched it (https://github.com/stephanrauh/bootstrap-tagsinput).

[stephanrauh]

I've uploaded a new developer version of BootsFaces 1.2.1 to Maven Central. #369 shows how to get it.