Customize Angular Bootstrap datepicker popup buttons

Question

I want to customize the default buttons in Angular Bootstrap datepicker popup. Currently I have
What I want is a space of around 1(or 2)px between the blue and green buttons. The green button should remain the same(both space in between wise and size wise).

Currently, there are a lot of code and I have no idea about where the CSS files are located. Also, there for all the code in the project, the same thing is being observed and the change has to be made for all such occuring cases. I have tried to make changes in the bootstrap\less\button-group.less file:

.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: 1px;
  }
}

.btn-group-vertical {
  > .btn,
  > .btn-group,
  > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }

  // Clear floats so dropdown menus can be properly placed
  > .btn-group {
    &:extend(.clearfix all);
    > .btn {
      float: none;
    }
  }

  > .btn + .btn,
  > .btn + .btn-group,
  > .btn-group + .btn,
  > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 1px;
  }
}

And in bootstrap\distcss\bootstrap.css

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: 1px;
}

But nothing happens. The rendering still happens with margin left of -1px.

How do I resolve this?

Maybe you know this, but you should never modify the library's files. For css/less you can easily override the styles from within your own files. Just use the same selector (e.g. .btn-group .btn + .btn { ...}). Your files normally are loaded after the library files, so it will automatically override the original version. — johey
– johey, Commented Dec 10, 2018 at 12:39
To find out why it's not working, inspect the elements in your browser (usually the shortcut is CTRL-SHIFT-i). In the style inspector you then can check which styles are considered for the given element and which ones are actually applied. (more info on developers.google.com/web/tools/chrome-devtools/inspect-styles) — johey
– johey, Commented Dec 10, 2018 at 12:42
@johey I am seeing that in the inspector, the properties that I changed are not reflected back — Shankha057
– Shankha057, Commented Dec 10, 2018 at 12:44

svarog · Accepted Answer · 2018-12-19 14:33:06Z

1

You can find the templates at the github repo, the specific template for the Datepicker-Popup you can find here.

You can copy it and make your own customized copy and link it to the directive using the datepicker-template-url attribute

I recommend just in-lining the margin css style over your custom template and be done with it

answered Dec 19, 2018 at 14:33

svarog

9,8855 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Customize Angular Bootstrap datepicker popup buttons

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related