absolute positioned elements: wrong ancestor reference?

Discussion of features and help with problems encountered while using libRocket

absolute positioned elements: wrong ancestor reference?

Postby RobertP on Thu Oct 29, 2015 7:49 pm

According to this:

http://www.w3schools.com/css/css_positioning.asp

in CSS, an absolutely positioned element is positioned with respect to the nearest "positioned" (non-static) ancestor element. A "positioned" element is defined as one whose position is anything except static.

A positioned element is an element whose computed position property is either; relative, absolute, fixed or sticky.
https://developer.mozilla.org/en-US/doc ... on#Summary


In libRocket, CSS isn't behaving like this for me. In libRocket, an absolutely positioned element seems to get positioned with respect to the nearest "absolute" ancestor only. If the ancestor element is anything other than "absolute" (i.e. if the ancestor element has "relative," "fixed," or "sticky" positioning), then it seems that that ancestor element isn't being used as a position reference for any absolutely positioned child elements.


What I'm trying to do is fake a degree symbol since it isn't available in the fonts I'm using.

So if I have the following in an html document (html, not rml):

Code: Select all
<div id="maindiv">
    <div id="red_subdiv1">
        <span>123.45 &nbsp;</span>
        <div id="degree_symbol_position_w_r_t_red_subdiv1">o</div>
        <span>F</span>
    </div>
    <div id="yellow_subdiv2"> - HIGH ALARM</div>
</div>
(Note: I had to make the element with id="degree_symbol_position_w_r_t_red_subdiv1" a <div> instead of a <span>, because if I make it a <span>, then in libRocket I can't seem to alter its position using bottom or right offsets.)


along with the following css:

Code: Select all
  #maindiv
  {
      font-family: Sans-serif;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 10;
      right: 50;
      text-align: right;
      background-color: blue;
      white-space: nowrap;
  }
Code: Select all
  #red_subdiv1
  {
      position: relative; /* this makes this element a "positioned" element */
      display: inline;
      background-color: red;
  }
Code: Select all
  #degree_symbol_position_w_r_t_red_subdiv1
  {
      font-size: 18px;
      position: absolute;
      bottom: 10px;
      right: 20px;
  }
Code: Select all
  #yellow_subdiv2
  {
      display: inline;
      background-color: yellow;
  }



Here is the result I get viewing this html file in a Firefox browser:

Image

The text is right-aligned. (text-align:right in the #maindiv).

With this layout, even though the text is right-aligned, I am able to change the text in yellow_subdiv2 (" - HIGH ALARM"), and the degree symbol (id="degree_symbol_position_w_r_t_subdiv1") correctly maintains its position relative to red_subdiv1.

For example, if I change the text in yellow_subdiv2 from " - HIGH ALARM" to " - HIGH", I get the following result in a Firefox browser:

Image

As you can see, the degree symbol automatically moved to the right to maintain the same correct position with respect to red_subdiv1.

This is because the degree symbol element (the element with id="degree_symbol_position_w_r_t_subdiv1") has "absolute" positioning, so it is positioned with respect to the nearest non-static ancestor, which in this case is red_subdiv1.

In a Firefox browser, I can thus change the text in yellow_subdiv2 to anything I want, of any length, and the degree symbol automatically stays correctly locked to the upper left side of the "F".

----

However, in libRocket, this is not the case. I'm finding that, in libRocket, an element with "absolute" positioning gets positioned with respect to the nearest "absolute" positioned ancestor only. If a nearer ancestor has "relative" positioning, then that ancestor isn't used as a position reference for absolute positioned child elements.

So if I transfer this html/css to libRocket rml/rcss (changing font-family from "Sans-serif" to "OpenSans") I'm getting these results:

text in yellow div set to " -HIGH ALARM":

Image


text in yellow div set to " -HIGH":

Image

In libRocket, the degree symbol is in the wrong place, as it seems to be positioned with respect to #maindiv instead of being positioned with respect to red_subdiv1 as it should be. As far as I can tell, this is because #maindiv is the nearest ancestor that has "absolute" positioning.

As a hack, I could just adjust the right offset of the degree symbol to get it to appear in the correct position, but then I would have to manually change this right offset every time the width of the text in yellow_subdiv2 changes.


Has anyone else had an issue similar to this? If so, is there an easy way to fix it?
RobertP
 
Posts: 8
Joined: Tue Apr 07, 2015 2:22 pm

Return to Using libRocket


cron