How to make an html element expand to the top of the page with it's content?

Question

The title pretty much says it all, when there is extra text added to the div it should keep the bottom border of the div at the same spot and the top border should rise as high as necessary to acoomodate the extra text. The width is fixed.
I haven't tried many different things because I just can't find anything similar.

EDIT: the reason I want to do this is because I want to anchor the bottom right corner of an html element on a certain spot in my cesium viewer. At the moment I just fixed the width but I could use the same thing for the width. The bottom right corner should keep it's position next to the entity on the Cesium map.

@JasonIsMyName I've never used a fiddle, can I use Cesium in there because I get the position of the symbol with cesium? — Jan-Pieter, Sep 17 '19 at 13:05
I need to see your css. If you only have a version of your css with variables just keep them in there I should be able to figure out whats going on then at least c: — Jason Is My Name, Sep 17 '19 at 13:46

score 1 · Answer 1 · answered Sep 17 '19 at 14:07

1

If you can set a fixed width, you could do it using position: fixed:

.tooltip {
  border: 1px solid black;
  bottom: 10px;
  padding: 15px;
  position: fixed;
  right: 10px;
  width: 200px;
}

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

answered Sep 17 '19 at 14:07

Ted Whitehead

1,731
10
18

This didn't work for me, @emackey's answer fixed the issue. Thanks for taking time to answer though. – Jan-Pieter Sep 18 '19 at 08:27

score 1 · Accepted Answer · answered Sep 17 '19 at 15:24

1

Generally, when using absolute positioning, instead of specifying the location with top and left, you can swap out for some combination of bottom and right. When you do this, the coordinates are measured from the other side (the bottom or the right side, respectively), so if you have top-left based coordinates, you must subtract them from the width or height of the area.

Here's a demo. The piece that was modified here looks like this:

    // Set the HTML position to match the entity's position.
    testElement.style.right =
        (viewer.container.clientWidth - position2d.x) + 'px';
    testElement.style.bottom =
        (viewer.container.clientHeight - position2d.y) + 'px';

The rest is the same as this answer, just updated to use right and bottom instead of top and left.

answered Sep 17 '19 at 15:24

emackey

11,818
2
38
58

Thank you this worked great, I had to add/subtract a constant a constant amount of pixels to place the arrow of the popup at the right spot. For me specifically this was the answer: mouseOverPopUp.style.right = (viewer.container.clientWidth - entity_pos.x + 50) + 'px'; mouseOverPopUp.style.bottom = (viewer.container.clientHeight - entity_pos.y - 55) + 'px';. – Jan-Pieter Sep 18 '19 at 08:21
Does the viewer.container take up the whole page, or is there a 50/55px margin around it? Instead of `viewer.containder.clientWidth`, try using the element that contains the popup. Could also try `document.body` if that's what contains it. But I'm glad it's working. – emackey Sep 18 '19 at 13:24
I don't have access to the code at the moment but I'll try it out once I do. – Jan-Pieter Sep 19 '19 at 08:56

How to make an html element expand to the top of the page with it's content?

2 Answers2