Set HTML elements on re-sizing browser

Question

I am facing a problem when I reduce my browser window size,HTML element going to be disappear.But what I want is to make element visible and display vertically.I have searched lot but not getting the right answer that solves my problem.Here is my code.

  <div  style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 800px">
            <table width= "75%" style="margin-left:1%">
                <tr>
                    <td width="30%">
                        @Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">@TempData["ErrorMessage"]</div>
                    </td>
                    <td  width="70%" >
                        <div id="qrcode" style="display: none">                       
                            <img src="@Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })"  onclick="AppendURL('@this.Model.ShortUrl')"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

When I reduce size,QR code Image start disappearing as size decreasing.Thanks in Advance.

@ostapische yes..I posted my this same question with images yesterday,but no one answer me.Here is its link.Please help. (http://stackoverflow.com/questions/17780797/set-contents-of-page-according-to-browser-resolution) — EHS, Jul 23 '13 at 06:23
Ah, you've got an answer over there now. Then we can close this one as a duplicate. — Mr Lister, Jul 23 '13 at 07:04
@MrLister is right SarmadSaleem give a better solution in your old question. — ostapische, Jul 23 '13 at 07:26

score 0 · Accepted Answer · answered Jul 23 '13 at 07:22

You can't move table cell to next row without hard DOM manipulations, but you can use ul element. Lists cam be horizontal or vertical - that is what you need.
See this link.
HTML:

<p id="size"></p>
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 600px;">
  <ul id="holder" style="display: inline; list-style-type: none;">
        <li style="display: inline; list-style-type: none;">
            <img style="width: 200px;" src="http://yandex.st/www/1.630/yaru/i/logo.png" />
        </li>
        <li style="display: inline; list-style-type: none;">
            <img style="width: 200px;" src="http://www.google.ru/images/srpr/logo4w.png" />
        </li>
  </ul>
</div>

Javascript:

window.onresize = getWindowWidthHeight;
window.onload = getWindowWidthHeight;
function getWindowWidthHeight(event){
  var size = document.getElementById('size');
  var width = window.innerWidth;
  var height = window.innerHeight;
  size.innerHTML = 'Window width: ' + width + 'px<br />Window height: ' + height + 'px';
  var firstLi = document.getElementById('holder').children[0];
  if (width > 600) {
    firstLi.style.display = 'inline';
  } else {
    firstLi.style.display = 'list-item';
  }
};

And small CSS:

html, body {
  width: 100%;
  height: 100%;
}

You can drag borders on jsFiddle and see what's going on.
If window width is less than 600px then Google logo goes down.
You can use not only window width, but and div width to handle when second list item goes down.

Google logo is already under the first logo.Can you please edit my code? — EHS, Jul 23 '13 at 07:26

score 0 · Answer 2 · answered Jul 23 '13 at 07:28

Like ostapische said you tables are not responsive. You can use divs like this.

<div class="container">
   <div class="captcha"></div>
   <div class="qrcode"></div>
</div>

 .container{
    border: 1px solid lightgrey;
    border-radius: 10px 10px 10px 10px;
    width: 800px
 }

.captcha{
    float:left;
    width:100%;
    max-width:30%;
    height:100px;
}

.qrcode{
    float:left;
    width:100%;
    max-width:70%;
    height:100px;
}

Set HTML elements on re-sizing browser

2 Answers2