nreese/enhanced_tilemap

Kibana CSS changed on plugin install

HungryHumps opened this issue · 7 comments

HungryHumps commented

After installing the plugin, the buttons and banners will change their rendered output from default.
Noticeable on the visualisations buttons, as well as error banners.

nreese commented

Can you provide some screen shots. I am not sure what you are talking about

iamyourexpert commented

I think if you change the dashboard to dark background, the viz shows a white bar.

HungryHumps commented
nreese commented

Looks like the screen shots did not make it into the issue. Can you try reposting them?

szydan commented

The issue is that your less file is declaring some classes on root level e.g:
https://github.com/nreese/enhanced_tilemap/blob/master/public/vis.less#L37

To avoid messing other components styles
you should make the css more specific
Classes which are used in main plugin viev should all be wrapped in etm-vis class like

 .etm-vis {
    .btn-input:hover {
      color: #2D2D2D;
    }
    ... HERE REST OF THE CLASSES 

}

The same should be done for options screen
https://github.com/nreese/enhanced_tilemap/blob/master/public/options.html

by wrapping the whole view in a single div with a class

<div class="etm-vis-options">
</div>

and then again in less wrap all classes used in this view like

 .etm-vis-options {
    ... HERE ALL CLASSES USED IN OPTIONS VIEW
}

In this way your css will not mess up with other plugins and kibana

mehmetfurkanaydin commented

Enhanced Tilemap plugin uses bootstrap-theme.css and this file changes default Kibana styles.

nreese commented

Closing. New releases (https://github.com/nreese/enhanced_tilemap/releases/tag/v2017-09-23 and onward) remove bootstrap CSS from plugin. The bootstrap CSS was stomping on kibana's CSS