Input groups inside tabs not showing image

[MarinaParticipant]

I have tabs and inside of each tab I have input group “search”. Only initial tab showing input group with image, but all other tables displays input group without image. If I set up second tab to be initial tab , than this tab is showing correctly input group with image, but all other tabs not.
If I put input groups outside tabs they are both showing just fine.

 <div style="width: 100%;" id="jqxWidget"> 
        <div id="mainSplitter">

                <div class="splitter-panel">
                     <div id='jqxTabs' style="visibility:hidden;">

                     <ul>

                             <li style="margin-left: 10px;">Locate</li>

                            <li>History</li>

                             <li>SMS</li>

                             <li >Filters</li>

                        </ul>
                     <div id="content1" style="overflow: hidden;">
                     <br />
                    
                            <div class = "section group">
                                <div class="col grid_12_of_12" >
                                   <div id="inputSearchLocate" style="margin:5px 0px 5px 20px;">
                                        <input type="text"/>
                                        <div id="searchLocate"><img alt="search" width="15" height="15" src="jqwidgets/styles/images/search.png" /></div>
                                    </div>
                                </div>     
                            </div>

                             <div id='jqxTreeLocate' style='visibility: hidden; float: left; margin-left: 2px; border:0px;'></div>
                             <br /><br />
                               <div>
                                  
                                   <input type="button" value="Locate Now" style='margin:5px 20px 5px 5px; float:right;' id='locateUsersButton'  />
                                    <a href="#" id = "btnClearLocateTree" style="float:right;" >Clear</a>
                               </div>
                               <br />
                                 <table width=100%>
                               <tr>
                                    <td><div class ="rectangle" style="background-color:Blue;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not on location Schedule</div></td>
                                </tr>
                                <tr>
                                    <td><div class ="rectangle" style="background-color:Red;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not locatable</div></td>
                                </tr>
                               </table>
                     </div>
                     <div id="content2" style="overflow: hidden;">
                     <br />
                            
                        <div id='jqxTreeHistory' style='visibility: hidden; float: left; margin-left: 2px; border:0px;'></div>
                        <br />
                           <div class="section group">
                            <div class="col grid_3_of_12" ><div  style='float:right; margin-top:5px;'> Set Date:</div></div>
                            <div class="col grid_9_of_12" ><div  style='float:left; margin-right:20px;' id='jqxDateTimeInput'></div></div>
                           </div>
                           <br />
                           <table width=100%>
                               <tr>
                                    <td><div class ="rectangle" style="background-color:Blue;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not on location Schedule</div></td>
                                </tr>
                                <tr>
                                    <td><div class ="rectangle" style="background-color:Red;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not locatable</div></td>
                                </tr>
                               </table> 
                    </div>
                     <div id="content3" style="overflow: hidden;">
                     <br />
                            <div class = "section group">
                                <div class="col grid_12_of_12" >
                                   <div id="inputSearchSMS" style="margin:5px 0px 5px 20px;">
                                        <input type="text"/>
                                        <div id="searchSMS"><img alt="search" width="15" height="15" src="jqwidgets/styles/images/search.png" /></div>
                                    </div>
                                </div>     
                            </div>

                             <div id='jqxTreeSms' style='visibility: hidden; float: left; margin-left: 2px; border:0px;'></div>
                             <br />
                             <table>
                             <tr>
                                <td>Subejct:</td>
                        
                             </tr>
                             <tr>
                                <td> <input type="text" id="txtSubject"/></td>
                        
                             </tr>
                             <tr>
                                <td>Text:</td>
                       
                             </tr>
                             <tr>
                                <td> <textarea id="jqxTextArea" ></textarea></td>
                        
                             </tr>
                             </table>
                    
                            <br />
                            <div><input type="button" style='margin:5px 20px 5px 5px; float:right;' value="Send" id='sendSMSButton'  />
                                <a href="#" id = "btnClearSMSTree" style="float:right;" >Clear</a>
                            </div>
                            <br />
                            <table width=100%>
                               <tr>
                                    <td><div class ="rectangle" style="background-color:Blue;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not on location Schedule</div></td>
                                </tr>
                                <tr>
                                    <td><div class ="rectangle" style="background-color:Red;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not locatable</div></td>
                                </tr>
                               </table>
           
                    </div>
                     <div id="content4" style="overflow: hidden;">
                         <br />
                           <div class = "section group">
                                <div class="col grid_12_of_12" >
                                   <div id="inputSearchUsers" style="margin:5px 0px 5px 20px;">
                                        <input type="text"/>
                                        <div id="searchUsers"><img alt="search" width="15" height="15" src="jqwidgets/styles/images/search.png" /></div>
                                    </div>
                                    
                                </div>     
                            </div>

                               <div id='jqxTreeUsers' style='visibility: hidden; float: left; margin-left: 2px; border:0px;'></div>
                               <br /><br />
                               <div>
                                    <input type="button" style='margin:5px 20px 5px 5px; float:right;' value="Save" id='saveUsersButton' />
                                    <a href="#" id = "btnClearUsersTree" style="float:right;" >Clear</a>
                               </div>
                               <br />
                               <table width=100%>
                               <tr>
                                    <td><div class ="rectangle" style="background-color:Blue;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not on location Schedule</div></td>
                                </tr>
                                <tr>
                                    <td><div class ="rectangle" style="background-color:Red;">&nbsp;</div></td>
                                    <td><div class="commenttext">User Not locatable</div></td>
                                </tr>
                               </table>
                              
                    </div>
             
                    </div>
                
       </div>

                <div class="splitter-panel" >
                <div ><%--<input type="button" value="Start AutoRefresh" id="refreshMapButton"  />--%></div>
                <br />
                <div id="myMap" style="position: absolute; width:900px; height:700px; "></div>
  
                </div>

        </div>

and here script to init input groups:

                $("#inputSearchLocate").jqxInput({ placeHolder: "Search ...", height: 25, width: 250, minLength: 1 });
                $("#inputSearchUsers").jqxInput({ placeHolder: "Search ...", height: 25, width: 250, minLength: 1 });
                $("#inputSearchSMS").jqxInput({ placeHolder: "Search ...", height: 25, width: 250, minLength: 1 });

[ivailoParticipant]

Hi Marina,

To initialize correctly widgets in your tabs you have to use initTabContent callback.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[MarinaParticipant]

Thanks, it helped. I was initiating trees controls for each panel already in initTabContent, but not those input group controls. Looks like its working now. Are all controls for each panel should be initialized in that call back or just complex controls? i had buttons that was not initialized that way but they were working fine.

Marina

[ivailoParticipant]

Hi Marina,

We recommend initTabContent to be used about initialization of every widget.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts