The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
 Reply to this topicStart new topic
> want to keep focus inside dialog box until cancel pressed
Christian J
post Dec 22 2014, 12:46 PM
Post #21


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(CharlesEF @ Dec 22 2014, 04:46 PM) *

Setting 100% height for BODY and HTML had no effect.

Haven't looked at your HTML, but note that all involved parent/ancestor elements need to have their height specified for this to work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 23 2014, 03:21 PM
Post #22


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(Christian J @ Dec 22 2014, 11:46 AM) *

QUOTE(CharlesEF @ Dec 22 2014, 04:46 PM) *

Setting 100% height for BODY and HTML had no effect.

Haven't looked at your HTML, but note that all involved parent/ancestor elements need to have their height specified for this to work.

I have posted 2 versions that work fine, only the 1st version has a problem. Maybe when I have more time I will look into more or maybe someone else will fix it. Just hope they report back on the fix. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 25 2014, 11:43 AM
Post #23


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Use the following on the #mask div:
CODE
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 25 2014, 12:31 PM
Post #24


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(Frederiek @ Dec 25 2014, 10:43 AM) *

Use the following on the #mask div:
CODE
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;


Thank you very much. I could have sworn I'd tried 'position: fixed' before and it didn't work. Oh well. I will say that I changed the CSS for #mask and your corrections still worked. I mean I can still scroll the text but at least the entire bottom part of the page is not click-able like before, the dialog stays in the middle and the content doesn't require any container div. This is the old #mask CSS:
CODE
#mask
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-image: url(./transpBlack50.png);
}

This is the corrected #mask CSS:
CODE
#mask
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1000;
    background-image: url(./transpBlack50.png);
}

Now, if I could just get vertical centering to work on the dialog itself, instead of the current relative, I would be a happy camper. biggrin.gif

Have a happy holiday.

This post has been edited by CharlesEF: Dec 25 2014, 12:38 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 25 2014, 01:26 PM
Post #25


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
As a test I downloaded a new copy of my 1st modal.htm file. I only changed position 'absolute' to 'fixed' and it still works as it should. I would have bet money that I tried that before, oh well. Thanks for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 25 2014, 02:37 PM
Post #26


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yes, it does. But I don't understand why. Fixed makes100% height work, 100% of the viewport though, not of the page. How is that? I must have missed something here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 25 2014, 02:40 PM
Post #27


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">

body   { margin: 0; padding: 0 }

#a { position: fixed; background: red; width: 10%; height: 100%; }
#b { position: fixed; background: green; width: 10%; height: 90% }
#c { position: fixed; background: blue; width: 10%; height: 80% }
#d { position: fixed; background: pink; width: 10%; height: 70% }
#e { position: fixed; background: purple; width: 10%; height: 60% }
#f { position: fixed; background: yellow; width: 10%; height: 50% }
#g { position: fixed; background: black; width: 10%; height: 40% }
#h { position: fixed; background: orange; width: 10%; height: 30% }
#i { position: fixed; background: aqua; width: 10%; height: 20% }
#j { position: fixed; background: teal; width: 10%; height: 10% }

</style>

</head>


<body>


<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j"></div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 25 2014, 03:51 PM
Post #28


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
As I have said, CSS is not my strong suit. I can't tell you why it works but I will play with your example page and see what I can figure out.

Thank you, happy holidays.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 25 2014, 04:34 PM
Post #29


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Dec 25 2014, 08:37 PM) *

Yes, it does. But I don't understand why. Fixed makes100% height work, 100% of the viewport though, not of the page. How is that? I must have missed something here.

This was odd. http://www.w3.org/TR/CSS21/visudet.html#propdef-height says
"The percentage is calculated with respect to the height of the generated box's containing block."

and http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning says
"for a fixed positioned box, the containing block is established by the viewport."

The above makes sense, but then the following example is given in the second link (note the comment):

CODE
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }

(a similar example is used again in http://www.w3.org/TR/css3-positioning/#fixed-positioning ). Side note: why does the example's screen media BODY has its height specified with the in unit?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 26 2014, 09:46 AM
Post #30


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE
Now, if I could just get vertical centering to work on the dialog itself, instead of the current relative, I would be a happy camper.

Use:
CODE
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

on #mask div (together). See also http://css-tricks.com/centering-css-complete-guide/ .

Though I'd change that to #mask > div ( see Child selectors at http://www.456bereastreet.com/archive/2005...lectors_part_2/ ).
And use the correct vendor prefixes for the transform, see http://css3please.com .

I forgot to say you then should get rid of the inline styling for #page.

This post has been edited by Frederiek: Dec 26 2014, 09:51 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 27 2014, 02:36 AM
Post #31


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Thanks for the link. I did look into this before but I know IE8 (and maybe IE9) has problems. I will look into it deeper, thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 27 2014, 09:03 AM
Post #32


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
See also http://caniuse.com/#feat=transforms2d
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 27 2014, 11:24 AM
Post #33


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Will do, thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 30 2014, 03:13 AM
Post #34


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
I ended up using the transform method for current browsers and a conditional CSS statement for IE8 and below. Seems to work fine even thou IE8 doesn't seem to support any vertical centering. Since the OP has never replied who knows if this is even what he was looking for but in case this helps someone else I have attached it. Thank you for the help.
Attached File  modalIE.htm ( 16.53k ) Number of downloads: 229
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 30 2014, 05:16 AM
Post #35


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You forgot the vendor prefix for WebKit. Safari needs that, as seen at caniuse, or the modal box isn't centered.

-webkit-transform: translate(-50%, -50%);

Surely there are ways to make the vertical centering work in IE8, probably even without the need for conditional comments. I don't have any IE, but a quick search on "css vertical centering ie8" returns promising results (SmashingMagazine?).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 30 2014, 11:13 AM
Post #36


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Christian J @ Dec 25 2014, 10:34 PM) *

This was odd. http://www.w3.org/TR/CSS21/visudet.html#propdef-height says
"The percentage is calculated with respect to the height of the generated box's containing block."

and http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning says
"for a fixed positioned box, the containing block is established by the viewport."



Thanks, I had totally fotgotten about that. Alas, becaus it seems very useful for certain things.


QUOTE
The above makes sense, but then the following example is given in the second link (note the comment):

CODE
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }


But that must be a print style sheet, so no viewport. I guess then it makes sense to establish a height.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 30 2014, 01:47 PM
Post #37


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(Frederiek @ Dec 30 2014, 04:16 AM) *

You forgot the vendor prefix for WebKit. Safari needs that, as seen at caniuse, or the modal box isn't centered.

-webkit-transform: translate(-50%, -50%);

Surely there are ways to make the vertical centering work in IE8, probably even without the need for conditional comments. I don't have any IE, but a quick search on "css vertical centering ie8" returns promising results (SmashingMagazine?).

Oops, what makes it worse is that I was looking at the caniuse website when I made the changes. Thanks for pointing this out.

As for IE8 and IE7, I'm sure I could still use the old 'parent's height, subtract the children's height, divide by 2' method but I'm happy the way it is. If I could define a height then I most likely could get it to work in IE8, at least, but since I use 100% height that method won't work. Attached is the corrected file (as I understand it).
Attached File  modalIE.htm ( 16.61k ) Number of downloads: 243


This post has been edited by CharlesEF: Dec 30 2014, 02:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 30 2014, 05:26 PM
Post #38


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Like I said, I don't have IE; MS has stopped developing IE for Mac many years ago.

What's the problem with setting the height of the #page div to 338px, which is the computed height?

Have you tried the copen from the Smashingmagazine article in IE 7 and/or 8? And does that work?

BTW, here's a useful css3 generator: http://css3generator.com , provides vendor prefixes where needed. Very handy.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 30 2014, 05:52 PM
Post #39


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Since I use the same CSS for different dialogs, depending on the application, I wanted to stay away of putting fixed height CSS. While the demo box may be 338px, I have others that are no where near that size. Thanks for the link, I will check it out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 31 2014, 05:07 AM
Post #40


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Ah, ok. I didn't realise you had more modal boxes with different heights.

Still, it would be nice to find a solution even for that.

Just some food for reading:
http://www.vanseodesign.com/css/vertical-centering/
http://css-tricks.com/centering-in-the-unknown/

Happy New Year!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 07:52 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC