Member Avatar for zanzo

I have a frame that includes a hidden <div> at first (before any action), the problem is that when opening the page, I have a white space, and i can't reduce the size of the frame because the content of the <div> will not appear!

how to hide the white space of the frame without reducing it's size?!?

  • 3 Contributors
  • 9 Replies
  • 124 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by mathew.parry

Dani AI

Generated

Short summary: the white gap comes from reserving visible space when the file-list box is expected later. was right to point at CSS toggling, but a cleaner pattern is to keep the frame wide (so the file list will fit later) and take the file-list out of normal flow so it does not leave a blank slot when hidden.

Absolute-overlay pattern (fast, compatible)

  • Put the file-list inside the fixed frame but use position: absolute so it does not affect layout while hidden. Make the frame position: relative so the overlay is positioned against it. Toggle a class to show/hide the overlay when upload completes.

Example:

<style>
.frame { position: relative; width: 600px; height: 200px; overflow: hidden; }
.file-list { position: absolute; right: 0; top: 10px; width: 300px; display: none; background: #f8f8f8; }
.file-list.visible { display: block; }
</style>

<div class="frame">
  <form>...upload control...</form>
  <div id="fileList" class="file-list">Uploaded files...</div>
</div>

<script>
function showFiles() {
  document.getElementById('fileList').classList.add('visible');
}
</script>

Sliding-in alternative

  • Position the box just outside the visible area (right: -320px) and transition it into view by changing right or using transform: translateX(0). This visually hides the extra space until needed and gives a pleasant animation.

If the "frame" is an iframe and you want to change the parent iframe size after upload, remember same-origin rules: you can resize parent.document.getElementById(...) only for same-origin iframes; use postMessage for cross-origin communication. Troubleshooting: check padding/margins, overflow and z-index, and ensure the overlay does not block essential controls or keyboard focus.

Recommended Answers

All 9 Replies

Member Avatar for sillyboy

Do you have a link by any chance? If the div is "hidden" I assume you mean no content, how it is taking up space? Maybe I don't understand the problem entirely...

Member Avatar for zanzo

when I open the page, I have a frame that contains a hidden div. After uploading a file the div will appear and contains the name of uploaded file.

My question is how to hide the white space when the div is hidden?

u know the frame has fixed height and width! if I reduce the width of the frame, then the content of the div will not appear!

Member Avatar for sillyboy

Not too sure why you have punctuated those sentences when I had no idea of your requirements.

Anyway, you should look at the visibility or display attributes for the div (css, but it can easily be modified by JavaScript).

Member Avatar for zanzo

The frame is in fact an upload form, which should be displayed permanently, when user upload a file the file will appear in a box (this box is hidden if no file uploaded).

The problem is:

Even if the box is hidden, I should have space for it in the Frame otherwise it's content will not appear, so how to hide the white space of the box without decreasing the frame width?!

don't know if u got my idea :(

Member Avatar for sillyboy

So originally the box should be "hidden" and take up no space, correct?

What I assume happens next is some kind of box is pressed to upload a file, and if this is so, you attach an even e.g. "onclick" to the button and change the css of the box at the same time.

Would this work for your scenario?

Member Avatar for zanzo

Yes, That's correct.

But the problem is not with the box! it is with the frame width. Actually if the box is hidden it doesn't take any space. Also, i should have frame size big enough to hold the box content (while not empty). That's why i have problem with white space in my page!

Maybe I can use an event, to increase the width of the frame on uploading a file??

Member Avatar for sillyboy

You could probably increase the width of the frame, otherwise have some other content in the frame, or have a permanently hidden div to set the width.

Hopefully I am understanding you now :p

Member Avatar for zanzo

Are you ? :P

Anyway I will try to increase the frame width after upload !!

Member Avatar for mathew.parry 
Test
<div style="visibility:hidden;display:none;">
You can't see me... <br />
And I don't take up any space...<br />
</div>
Test
<div style="visibility:hidden;display:inline;">
You can't see me...<br />
But I do take up space... <br />
</div>
Test
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.