Change jquery datepickers inline

Question

I using jquery datepicker inline.

I need to change .ui-widget-header class

Now it like this

<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"></div>

And ui-widget-header has this style

ui-widget-header {
  border: 1px solid #dddddd/*{borderColorHeader}*/;
  background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
  color: #333333/*{fcHeader}*/;
  font-weight: bold;
}

I tried to change it in my scss

    .ui-datepicker-inline{
    background: #fff;
  .ui-datepicker-header{
    background: #fff;
    .ui-widget-header{
        border-bottom: 1px solid #efefef;
    }
  }
}

But border is still not only at bottom.

Where is my problem?

Robby Cornelissen · Answer 1 · 2018-04-04T10:16:54.857

0

You probably want to set the border-color property:

.ui-datepicker-header.ui-widget-header{
    border-color: transparent transparent #efefef;
}

Alternatively, it's possible that you could also set the border-width property, but that might shift the layout somewhat:

.ui-datepicker-header.ui-widget-header{
    border-width: 0 0 1px;
}

In pure CSS it would look like this:

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-datepicker-header.ui-widget-header {
    background: #fff;
    border-color: transparent transparent #efefef;
}

<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"></div>

edited Apr 04 '18 at 10:16

answered Apr 04 '18 at 10:09

Robby Cornelissen

91,784
22
134
156

I want to left only border-bottom – Balance Apr 04 '18 at 10:10
Yes, I understood your question. – Robby Cornelissen Apr 04 '18 at 10:12
But I cannot use it, with border-bottom? – Balance Apr 04 '18 at 10:15
That will only redefine the bottom border. The other borders from `.ui-widget-header` will still be in effect. – Robby Cornelissen Apr 04 '18 at 10:17
Probably also useful to take a look at the difference between nested classes and multiple classes: https://stackoverflow.com/questions/11084757/sass-scss-nesting-and-multiple-classes – Robby Cornelissen Apr 04 '18 at 10:28

Change jquery datepickers inline

1 Answers1