CODEWITHSUNDEEP
jqueryhtmljquery-mobile
p0tta
p0tta

Reputation: 1651

html div formatting issue on mobile phone html5 jquerymobile

I have the following DIV in my HTML code

<div id="page3" data-role="page">
<div data-role="content" style="height: 60px; top: 50%;" >  
    <table border="0" width="100%">
      <tr>
        <td>
            <img id="advImageMap" style="float:left; margin-top:0px;" width="40" height="40" >
            <p id="mapText" style="display: inline-block; margin-left:10px; margin-top:5px;"></p>
            <img id="popupMap" src="icons/ico_navi.png" class="ui-btn-right" style="float:right; margin-top:1px" />
        </td>
      </tr>
    </table>
</div>

What this piece of code intends to do is, place an icon on the extreme left followed by some text followed by another image. The images are typically thumbnails or very small sized images. The issue I am seeing here is, when this page is displayed on the mobile phone and sometimes when the text is long, the last image 'popupMap' goes all the way to the end and the last image spills over to the next line which screws up formatting. I read somewhere that I could use the jQuery ellipsis library to add ... to the text but I don't know how to configure it for the mobile devices in my case. For the tablet it seems to look good. Any suggestions or help is much appreciated.

Upvotes: 0

Views: 351

Answers (1)

Sleavely
Sleavely

Reputation: 1683

Since you are already using tables, why not put each intended column inside a <td>?

I've removed your floats and since I dont know the dimensions of your #popupMap I assumed 32x32 pixels (and a purple background :D)

<div id="page3" data-role="page">
<div data-role="content" style="height: 60px; top: 50%;">  
    <table border="0" width="100%"><tbody>
      <tr>
        <td style="width: 40px;">
            <img id="advImageMap" style="margin-top:0px;" width="40" height="40">
        </td>
        <td>
            <p id="mapText" style="margin-left:10px; margin-top:5px;">Lorem ipsum im a gummibear because gummibears are freaking awesome!</p>
        </td>
        <td style="width: 32px;">
            <img id="popupMap" src="icons/ico_navi.png" class="ui-btn-right" style="margin-top:1px; width: 32px; height: 32px;background-color: purple;">
        </td>
      </tr>
    </tbody></table>
</div>
</div>

Upvotes: 1

Related Questions