C++

Forum

 
HTML/CSS Q: popup exceeds html box

Duthomhas (13212)
I don't know enough about this to fix it without relying on jQuery or something. I would prefer to keep it pure HTML/CSS.

I have a popup (position:absolute), but it is anchored in text, which flows. If the browser window is resized properly, hovering will cause the popup to display partly off-screen.

I know I've seen stuff before about positioning things so that they don't exceed an edge of some bounding container. But I can't seem to find it now.

Can anyone point me to something that will help my popup not position itself past the bounds of the <html>?

(Thanks!)
Homberto (126)
Perhaps this is what you're looking for:
1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
  <head>
  </head>
  <body>
    <div class="popoutcont" style="width: 100%;height:100%;z-index:9996;background-color:rgba(0,0,0,0.5);position:absolute;left:0px;top:0px;">
        <div class="popout" style="height: 250px;position:absolute;width:250px;border: 5px solid #AFAFAF;background-color:#CFCFCF;text-align:center;z-index:9997;left:40%;top:60px;padding-top:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;">
          I'm a box full of text!
          <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
        </div>
    </div>
  </body>
</html>
Last edited on
Duthomhas (13212)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<html style="padding:10px;background:#DDD">

<head>
  <style>
    .pop {
      position:         relative;
      bottom:           1ex;
      font-family:      Verdana, sans-serif;
      color:            #005994;
      font-size:        .7em;
      font-weight:      bold;
      cursor:           default;
    }
    .popbody {
      display:          none;
      position:         absolute;
      left:             25px;
      bottom:           5px;
      font-family:      Verdana, sans-serif;
      font-weight:      normal;
      color:            black;
      line-height:      1.1;
      min-width:        14em;
      border:           1px solid;
      padding:          5px;
      background-color: #fff;
      word-wrap:        break-word;
      z-index:          9999;
      overflow:         auto;
    }
    .pop:hover .popbody {
      display: block;
    }
  </style>
</head>

<body style="width:600px;margin:0 auto;padding:10px;background:white;font-size:1.5em;border-right:1px solid red">

  Lorem ipsum dolor sit amet, consectetur   <span class="pop">[1]<span class="popbody">1 Can you read me now?</span></span>
  adipiscing elit. Praesent rhoncus arcu ut <span class="pop">[2]<span class="popbody">2 Can you read me now?</span></span>
  dolor sagittis porttitor. Etiam venenatis <span class="pop">[3]<span class="popbody">3 Can you read me now?</span></span>
  arcu sed magna convallis iaculis nec et   <span class="pop">[4]<span class="popbody">4 Can you read me now?</span></span>
  nisl. Pellentesque dapibus nulla ut urna  <span class="pop">[5]<span class="popbody">5 Can you read me now?</span></span>
  molestie laoreet. Morbi in lacinia purus. <span class="pop">[6]<span class="popbody">6 Can you read me now?</span></span>
  Pellentesque at ex non nisi porttitor     <span class="pop">[7]<span class="popbody">7 Can you read me now?</span></span>
  vehicula et luctus elit. Proin fermentum  <span class="pop">[8]<span class="popbody">8 Can you read me now?</span></span>
  lacus nec metus feugiat, nec ornare urna  <span class="pop">[9]<span class="popbody">9 Can you read me now?</span></span>
  posuere. In sed consequat neque, id       <span class="pop">[10]<span class="popbody">10 Can you read me now?</span></span>
  elementum dui. Aliquam in finibus lorem,  <span class="pop">[11]<span class="popbody">11 Can you read me now?</span></span>
  ut dignissim nunc. Duis malesuada est     <span class="pop">[12]<span class="popbody">12 Can you read me now?</span></span>
  enim, et rhoncus erat ultrices eget.      <span class="pop">[13]<span class="popbody">13 Can you read me now?</span></span>
  
  <div style="text-align:right;margin-top:20px;color:#A00">
    I do not want the popups to cross the red line. &rarr;
  </div>
  
</body>
</html>
Homberto (126)
Here's a solution, but it's JS:
1) append ID's to the body and the popups.
2) get the right offset of the popup
1
2
3
4
5
6
 
function getRightOffset(popupID)
{
  var block=document.getElementById(popupID);
var offset=block.getBoundingClientRect();
return offset.left + block.offsetWidth;
}

3) compare the offset to the 'red line' and edit the popup
1
2
3
4
5
6
7
8
9
10
11
 
var block=document.getElementById()
var roffset=getRightOffset(popupID);
var body=document.getElementById(bodyID);
var broffset=getRightOffset(bodyID);
if(roffset<=broffset)
{
  var width=parseInt(block.style.width);
var difference=block.offsetWidth-width;
width=width-(broffset-roffset)-difference;
block.style.overflowX="scroll";
}

I wrote that on my phone so I have no clue if it works or is syntactically correct.
Topic archived. No new replies allowed.