OpenLayers cannot style dragBox

Question

I'm using Angular7/Typescript with OpenLayers 5 and I've added a DragBox from from 'ol/interaction';

mapValues.drawObj = new DragBox({
  class: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

I've added style to my scss file

.ol-myDragBox{
border-color: red;
border-width: 3px;
background-color: rgba(255,255,255,0.4);
}

No style shows...

I also tried putting this style and several other variation directly in the HTML in "Style" tags.

any help is greatly appreciated!

UPDATE Per the comment I changed my code to...

mapValues.drawObj = new DragBox({
className: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

.myDragBox {
background-color: rgba(255,255,255,0.4);
border-color: rgba(100,150,0,1);
}

...and I still have no style, all DragBox events fire though.

UPDATE When I look at the style in developer tools it looks like this...

.ol-dragbox[_ngcontent-c6]{
  background-color: rgba(255,255,255,0.4) !important;
  border-color: rgba(100,150,0,1) !important;
  border-style: solid;
  border-width: 3px;
  }

If I remove "[_ngcontent-c6]" the style starts working...this is something that gets automatically appended.

The class parameters should be `className` according to the [documentation](https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragBox-DragBox.html). — youri, Jun 24 '19 at 14:45
Can you try this `.myDragBox { background-color: rgba(255,255,255,0.4) !important; border-color: rgba(100,150,0,1) !important; }` — nitin9nair, Jun 24 '19 at 15:05
Is it the scss file from your component or the "global" scss file? — youri, Jun 24 '19 at 15:06
Could you try to move the class in the global scss file? I don't know how OpenLayers generate dragBox but it may be outside the DOM of the component. — youri, Jun 24 '19 at 15:20
After your last question I moved the style to my top level component library .scss file and I still do not see a style for DragBox? — Funn_Bobby, Jun 24 '19 at 15:22

score 0 · Accepted Answer · answered Jul 10 '19 at 20:10

0

I needed to add "::ng-deep" to the css class so it can reach inside it's encapsulation. For instance...

::ng-deep .myDragBox{
    background-color: rgba(255,255,255,0.3);
    border: 1px solid red;
  }

answered Jul 10 '19 at 20:10

Funn_Bobby

647
1
20
57

OpenLayers cannot style dragBox

1 Answers1