Question

I have a search component that contains a text and span inside a div that is inside a table.When i am resizing the browser the components(text and span) are getting wrapping into two line instead of resize the component itself. please find the code below.

<div id = '${lk}'>  
    <table border = "0" id="autocomp" width="100%">
        <tr>
            <td> 
                <div id='${lkId}'  class="ui-widget" >
                    <input type="text" id='${lkTxt}' style="float:right" />                         

                    <span id = '${spanLookup}' style="" class="liveSearchSpanSize ui-state-default ui-icon ui-icon-search liveSearchSpanCorner" 
                    onclick="return ></span>                    

                    <div id = '${ov}' style="border: 0px;display:none;" class= "first" >
                        <table id = '${gt}'  border="4" ></table>
                    </div>                  

                    <div id = '${pg}' >

                    </div>
                </div>                          
            </td>
        </tr>
    </table>    
</div>

Answer 1

Try wrapping it with <nobr> tag:

<nobr>
    <input type="text" id='${lkTxt}' style="float:right" />                         
    <span id = '${spanLookup}' style="" class="liveSearchSpanSize ui-state-default ui-icon ui-icon-search liveSearchSpanCorner"></span>
</nobr>

Judging from this test case, this will force the contents to not wrap regardless of the parent width.