Bootstrap form-group class not 100% inside jqxWindow

[JustintkwParticipant]

Hi:

I have a jqxWindow on my page, with the following codes (bootstrap them is properly linked; removing the theme makes no difference):

$(“#jqxWin_EditAd”).jqxWindow({ height: 525, width: 535, theme: ‘bootstrap’, isModal: true, resizable: false, autoOpen: false });

The control looks like this:

<div id="jqxWin_EditAd">
    <!--Frame for the window content-->
    <div id="jqxWin_EditAd_Title">
        Editing
    </div>
    <div id="jqxWin_EditAd_Content">
        <!--Frame for the window content-->
        <div class="form-group">
            <label class="control-label">Main Title:</label>
            <input type="text" id="EditAd_MainTitle" name="EditAd_MainTitle" maxlength="100" class="form-control">
        </div>
        <div class="form-group">
            <label class="control-label">Sub Title:</label>
            <input type="text" id="EditAd_SubTitle" name="EditAd_SubTitle" maxlength="100" class="form-control">
        </div>
        <div class="form-group">
            <label class="control-label">Content:</label>
            <textarea id="EditAd_Content" name="EditAd_Content" row="5" maxlength="500" class="form-control" ></textarea>
        </div>
    </div> <!--end jqxWindowContent-->
</div> <!--end jqxWindow-->

in the standard bootstrap.css, which I use, form-group has width of 100%. Yet when the window is opened, the text boxes and the text area stretched only half the width of the windows. Fearing that it might be the bootstrap css file, I replaced the class for each of the textbox/textarea with style=”width : 100%” instead. Still, the controls only extends to half the length of the window.

Any suggestion on how to resolve this issue is greatly appreciated!

Justin

[StanislavParticipant]

Hello Justin,

You can individually set the width of the elements using bootstrap.

Best Regards,
Stanislav

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

[Author]

Posts