[OpenLayers-Users] Moving LayerSwitcher position from top-right corner to bottom-left corner

[Adrian Popa]

Any suggestions on how to move the layer switcher icon to be relative to 
the bottom of the map?

On 07/16/2010 05:41 PM, Adrian Popa wrote:
> I studied CSS extensively the past two days, and I sort of managed to
> move it, but I still have two problems:
>
> 1. I can't position the layer-switcher-maximize button if I want to add
> an offset measured from the bottom (bottom: 40px). I can only display it
> if I specify an offset from the top - but my map size is not fixed, and
> I would like to have it linked to the bottom of the map. The rest of the
> div and the minimize button are displayed as expected.
>
> Here is my CSS override code:
> <style>
>        .olControlLayerSwitcher {
>           /*  position: absolute;
>             top: 25px;
>             right: 0px;
>           */
>             width: 20em;
>             font-family: sans-serif;
>             font-weight: bold;
>             margin-top: 3px;
>             margin-left: 3px;
>             margin-bottom: 3px;
>             font-size: smaller;
>             color: white;
>             background-color: transparent;
>
>             position: relative !important;
>             top: 350px !important;
>             right: auto !important;
>             bottom: auto !important;
>             left: 0px !important;
>             /* if I set top: auto !important and bottom: 40px !important,
> the div is no longer drawn on the screen */
>
>        }
>        .olControlLayerSwitcher .layersDiv {
>            padding-top: 5px;
>            padding-left: 0px !important;
>            padding-bottom: 5px;
>            padding-right: 0px !important;
>            background-color: darkblue;
>            width: 100%;
>            height: auto !important;
>       }
>
>       .olControlLayerSwitcher .layersDiv .baseLbl,
>       .olControlLayerSwitcher .layersDiv .dataLbl {
>            margin-top: 3px;
>            margin-left: 3px;
>            margin-bottom: 3px;
>       }
>
>       .olControlLayerSwitcher .layersDiv .baseLayersDiv,
>       .olControlLayerSwitcher .layersDiv .dataLayersDiv {
>            padding-left: 10px;
>       }
>
>       .olControlLayerSwitcher .maximizeDiv,
>       .olControlLayerSwitcher .minimizeDiv {
>            top: auto !important;
>            right: auto !important;
>
>            position: absolute !important;
>            bottom: 40px !important;
>            left: 0px !important;
>       }
>
>
> 2. It seems that the corner effect in the layer selection div is done by
> having some spans with variable margins - but the problem is - these
> margins are designed only to generate the left rounded corner. I need to
> adapt them to generate the rigth corner with the same margin as the left
> corner. Question is - since there are no classes or ids, can I do this
> without changing the OL API?
> Here is how the current code looks like:
>
> <div style="background-color: transparent;">
> <span style="background-color: darkblue; display: block; height: 1px;
> overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 0px;
> border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span>
>
> And here's how it is supposed to look like in order to have rounded
> corners in the layer selection div on all sides (set the right-margin to
> the same value as the left-margin):
>
> <div style="background-color: transparent;">
> <span style="background-color: darkblue; display: block; height: 1px;
> overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 5px;
> border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span>
>
> I am not quite sure where these divs are set - so that I can override them.
>
> Hope somebody can shed light on these problems,
>
> Regards,
> Adrian
>
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>