0

I've been working from the InfoBox documentation and this post here to try to get an InfoBox looking almost the same as a standard InfoWindow as a starting point for some slight cosmetic changes.

As you can see in this fiddle the 'stub' that connects the InfoBox to the marker is still positioned at the top of the InfoBox.

I've tried to use backgroundPosition (commented out when you first open the fiddle) as follows in the boxStyle parameter, but it doesn't work.

     boxStyle: {
        backgroundImage: "url('https://directory.fsf.org/w/extensions/SemanticDrilldown/skins/down-arrow.png')",
        backgroundRepeat: "no-repeat",
        /*backgroundPosition: "center bottom",*/
        opacity: 0.75,
        width: "280px"
    },

How can I move the stub down to the bottom center rather than the top left?

Community
  • 1
  • 1
Fat Monk
  • 2,077
  • 1
  • 26
  • 59

2 Answers2

1

Add it with an :after selector to the infobox. Like this

#infobox:after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 125px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #333 transparent;
    display: block;
    width: 0;
}

See Demo

p.s. I didn't remove the old one from your JS. That's why you'll see it in the screen still.

Supporting documentation per OP's request

There is plenty of documentation of CSS selector specifically the :before and :afterselectors. Some of it, and probably the most basic information will be found in w3schools.

SmashingMagazine also has a lot more detialed information and usefulness of this concept.

By hacking the element with a selector you can also style according to behaviors. such as :hover, :focus, :active, :inactive, :empty, and :blank

The actual triangle is built by drawing a small rectangle using borders and clipping one side of the borders. See this link in CSS tricks on how to build a CSS triangle.

As far as choosing :before or :after, there isn't a definite explanation as to which one you should use. Depending which one you use you will have to reposition accordingly. In some specific situations such as adding a font awesome icon via CSS selectors, it would make sense to add it to the :before selector if it is going to precede the element it is being attached to or use the :after selector if it's going to proceed the element instead

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • This is an interesting way of doing it. I also tried using `:before` and managed to put a 'title' box on the infoBox as well. Can you explain a bit about how this works, for example how the shape of the stub is defined, is the `:before` and `:after` option documented anywhere? – Fat Monk Jan 14 '16 at 13:48
  • I took the opportunity to ask that question separately for you. go check it out at http://stackoverflow.com/questions/34827794/when-to-use-before-or-after – LOTUSMS Jan 16 '16 at 15:38
  • thanks for that. Looks like that's got a really interesting discussion started. I did wonder to start with whether there was something in the InfoBox code that was tweaking things based on the css, but it's really useful to know that these css hacks can be used anywhere and the discussion in your new post really add to the understanding of how and why that works. I'll have to have a play with the css border hack as well. – Fat Monk Jan 16 '16 at 21:14
0

You need to set the background position on .infoBox and change the margin-top to margin-bottom on #infobox.

.infoBox {
    background-position: center bottom;
}

#infobox {
    margin-bottom: 8px;
}

See updated fiddle

James Coyle
  • 9,922
  • 1
  • 40
  • 48