[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] Mysterious extra padding below canvas



That's odd; my example works for me in Safari, FF and Chrome on OSX.
I put it here so you can try it verbatim:
http://tulrich.com/tmp/layout.html

There could be issues with the timing of the queries, or if our
platforms/browsers differ.

-T

On Mon, Nov 15, 2010 at 4:01 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:
> Hi Thatcher,
>
> Thank you very much for your kind help. I really liked the idea of the div
> locator, then I realized that I can achieve the same end by simply querying
> the getOffsetTop() on my canvas.
>
> Unfortunately, your example suffers from the same issue that prompted my
> posting in the first place: body.clientHeight returns a height that
> accomodates the elements on the page at their current size. In the case of
> your example it returns 78, while tl.getOffsetTop() returns 94. It looks
> like the height only goes to the bottom of the button and does even include
> padding, border & margin below the button. So I never see the blue div.
>
> Because of this, I need to use window.innerHeight and therefore still need
> to know the heights of the body padding, border and margin so I can subtract
> them at the bottom. Until I can figure out how to query or calculate these
> values, I am setting them myself and saving the values for later use in
> resize.
>
> Regards
>
> -Mark
>
>
>
> On 12/11/2010 19:43, Thatcher Ulrich wrote:
>
> Re scrollbars -- on the body element, set "overflow: hidden;" to
> inhibit scrollbars.
>
> -T
>
> On Fri, Nov 12, 2010 at 11:40 AM, Thatcher Ulrich <tu@tulrich.com> wrote:
>
> This sort of works for me -- using a 0x0 div to locate the top of the
> canvas area, and doing body.clientHeight - locator.offsetTop to
> compute the remaining height.
>
> There are some wrinkles having to do with when the body
> clientHeight/clientWidth is queried, and scrollbars, but you can
> probably work that out.
>
> -T
>
> ----
>
> <html>
>  <head>
>    <script>
>      function resize_blue_div() {
>        var b = document.body;
>        var tl = document.getElementById("top_locator");
>        var bd = document.getElementById("blue_div");
>
>        bd.style.height = (b.clientHeight - tl.offsetTop) + "px";
>        bd.style.width = b.clientWidth + "px";
>      }
>    </script>
>  </head>
>  <body style="width: 100%; height:100%; background-color: red;
> margin: 0px; padding: 0px;">
>    <p>One line of text.</p>
>    <p><input type="button" value="resize blue div"
> onclick="resize_blue_div()" />
>    <div id="top_locator" style="position: absolute; width: 0px; height:
> 0px;">
>    <div>
>      <div id="blue_div" style="background-color: blue; margin: 0px;
> padding: 0px;">
>      </div>
>    </div>
>  </body>
> </html>
>
>
> On Fri, Nov 12, 2010 at 10:35 AM, Mark Callow <callow_mark@hicorp.co.jp>
> wrote:
>
> I have a line of text in a <div> followed by a block canvas. I want to size
> the canvas so it fills the rest of the window below the line of text. If I
> set the canvas's CSS height to 100% the canvas is given a size equal to the
> window  size less the body's margin, border and padding. Therefore the
> combination of the line of text and the canvas is too big for the window. A
> scrollbar appears and the bottom part of my canvas is cut off.
>
> To size the canvas myself, I need to do something like the following
> pseudo-code:
>
> canvasHeight = window.innerHeight - body margin height * 2 - body padding
> height * 2 ;
> canvasHeight -= body border height * 2;
> canvasHeight -= text label height; (including any margin on the text);
>
> clientHeight gives me the content area height + padding. offsetHeight gives
> me clientHeight + border. So I can see how to get the border height but not
> how to get margin and padding heights.
>
> Regards
>
> -Mark
>
>
>
> On 12/11/2010 18:19, Thatcher Ulrich wrote:
>
> What exactly are you trying to measure?  You might be able to get what
> you want by putting a spacer DIV where you want the canvas area (with
> block positioning) and let the canvas have absolute positioning in the
> same spot.  The DIV will participate in the page layout, and you can
> control the canvas layout by querying the DIV and setting the canvas
> size via Javascript.
>
> Though I'm not sure what your goal is.  There may be a simpler way to
> get what you want.
>
> -T
>
> On Fri, Nov 12, 2010 at 9:52 AM, Mark Callow <callow_mark@hicorp.co.jp>
> wrote:
>
> When I have other elements on a page together with a canvas, in order to
> compute an ideal canvas size, I need to query, or compute, things like the
> margin, border and padding heights of elements, particularly the body
> element. I have not so far found any way through the DOM to obtain this
> information.  The queries I've found return (content area + padding) or
> (content area + padding + border). I have found no query whose result is
> influenced by the margin nor any to tell me the padding.
>
> Style queries return empty strings unless a style is actually set on the
> element so are useless for elements having default settings.
>
> Can anyone suggest a way to determine this information?
>
> Regards
>
> -Mark
>
>
>

-----------------------------------------------------------
You are currently subscribed to public_webgl@khronos.org.
To unsubscribe, send an email to majordomo@khronos.org with
the following command in the body of your email: