element unable to overflow html css

Question

I am new to this css and html recently I try making a simple website with top navigation bar on top. However I find out that the top navigation bar wont overflow even though it has been set to "overflow = scroll"

below is my code: css

      .topnav {
    overflow: scroll;
    background-color: #333;
  }

  .topnav a,
  .topnav input {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #4caf50;
    color: white;
  }

html

  <div class="topnav">
  <input
    type="file"
    id="getval"
    style="color:#FFFFFF;  width: 200px; font-size: 8px;"
  />
  <a id="clearBut" href="">Clear</a>
  <a id="undoBut">Undo</a>
  <a id="saveBut">Save Picture</a>
  <a id="savecsvBut">Save CSV</a>
  <a id="saveJsonBut">Save JSON</a>
  <a id="showtoolbox">Toolbox</a>
</div>

It looks okay when I havent upload and display pictures: when I haven't uploaded any picture

And it looks weird when I upload a picture larger than the window the display becomes weird after I upload picture

please help and advise me on what to do. thank you

esopp · Answer 1 · 2019-03-18T15:22:09.343

If the issue with the display is that the uploaded image is much wider than the topnav div (and the viewport), you can add a css rule to limit the width of any img element:

img { max-width: 100vw; }

This example would set the maximum image width to 100% of the viewport's width (and the image should stay in scale with itself).

EDIT: To stretch the navbar to the size of the image (with its original dimensions-- e.g., if the image is twice as wide as the browser window, change the navbar so that it is twice as wide as the browser window, too), rather than editing the CSS, I think you may have to use a script to update the width of the navbar after the image loads.

var image = document.getElementById('uploaded-image'); //replace "uploaded-image" with the id attribute of your image element, 
                                                       //as defined in the <img> tag
image.onload = function () {
 document.getElementsByClassName('topnav')[0].style.width = image.width + "px";
}

I see where it makes sense to assume that setting "overflow: scroll" in the CSS would accomplish this, but that setting is actually internal. In other words, if the navbar does not have room to display all of its contents (in this case, the upload button, "Clear", "Undo", "Save Picture", and etc.), "overflow:scroll" tells it to let you scroll WITHIN the navbar, to see the child elements that got cut off.

Hi, thanks for your reply. Instead of making the image stay in scale, i would like the window to expand to match the image, meaning that the dimension of the image is not affected. How do i do so? — jetjetboi, Mar 17 '19 at 03:39
The solution above should keep the aspect ratio of the image the same (meaning it shouldn't look stretched or squashed or anything like that). If you want the actual browser window to get bigger to fit the image, you can use window.resizeTo(width, height), but hijacking the browser window is not really good practice in a webpage intended for general use, and it's actually disabled in some browsers (somebody else explained this quite well here: https://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window) — esopp, Mar 18 '19 at 01:21

score 0 · Answer 2 · answered Mar 16 '19 at 16:34

0

i would set the topnav class an height of:

.topnav { max-height: 100vh; }

and the img:

img {display: block; margin: 10px auto; max-width: 90vw; }

answered Mar 16 '19 at 16:34

bill.gates

14,145
3
19
47

Hi, thanks for your reply. Instead of making the image stay in scale, i would like the window to expand to match the image, meaning that the dimension of the image is not affected. How do i do so? – jetjetboi Mar 17 '19 at 03:39

score 0 · Answer 3 · answered Mar 18 '19 at 15:56

0

Put below styles in your image class. Hope it makes your image responsive

.image-class-name {
  width: 100%;
  max-width: 100%;
  height: auto;
}

answered Mar 18 '19 at 15:56

Munni

731
5
20

element unable to overflow html css

3 Answers3