Search code examples
openlayers-3

Make attribution icon expand right instead of left in OpenLayers 3

I have an attribution icon on an Open Street Map layer in OpenLayers 3.

I have set it to the left side of the screen but when the button is clicked it attempts to expand out of the screen to the left (as is its default behaviour). Is there a way to get the attribution information expand to the right instead?

I have set the attribution icons position using some CSS:

.ol-attribution {
  right: 95%;
}

The following jsfiddle shows the current behaviour I wish to avoid (click on the i button in the bottom left):

http://jsfiddle.net/single_entity/7mvuxytv/

Solution

  • By making the position relative to the left instead of the right, the div expands on the right. Making the button float on the left makes it also stay at the same position to toggle it on and off.

    .ol-attribution {
  right: auto;
  left: .5em;
}
.ol-attribution button {
  float: left;
}

    http://jsfiddle.net/7mvuxytv/31/