vis.js - Update "navigationButtons" CSS so the buttons are at the top of he canvas

Question

I am using vis.js and would like to align the buttons displayed when using the "navigationButtons" option to the top of the canvas. I understand this is done using CSS, I was wondering if anyone had any examples?

Thank you in advance,

Anadi.

Answer 1

Preferable some HTML would be nice to work with. However you mention you'd like to update the "alignment" of the buttons. Therefore I would assume the "bottom:" and "right:" attributes is what you are looking for. However, since you want the alignment towards the top, you may want to use the "top:" attribute instead of "bottom:" and "left:" instead of "right:"...

E.g... The following should align these 4 buttons horizontally across the top... update the "left:" attribute to suit your preferred gutter width.

div.vis-network div.vis-navigation div.vis-button.vis-up {
    background-image: url("...png");
    top:10px;
    left:50px;
}
div.vis-network div.vis-navigation div.vis-button.vis-down {
    background-image: url("...png");
    top:10px;
    left:100px;
}
div.vis-network div.vis-navigation div.vis-button.vis-left {
    background-image: url("...png");
    top:10px;
    left:150px;
}
div.vis-network div.vis-navigation div.vis-button.vis-right {
    background-image: url("...png");
    top:10px;
    left:200px;
}