Search code examples
htmlcssflexboxsapui5

Custom background color flexbox

I want to set background color on flexbox and tried as follow.

Class definition on app:

<App id="app" class="weight-protocol"></App>

on FlexBox:

  <FlexBox
      height="20%"
      width="100%"
      alignItems="Start"
      class="calendar-header-bg"
      justifyContent="Center">

in the css file:

.weight-protocol .calendar-header-bg {
    background-color: #007DB2;
}

The custom background color is not going to apply at all as you can see: enter image description here

Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.

Solution

  • Did you try without .weight-protocol ?

    .calendar-header-bg {
    background-color: #007DB2;
}

    If not work you can use !important tag:

    .calendar-header-bg {
    background-color: #007DB2 !important;
}

    You can also try use only background tag instead background-color:

    .calendar-header-bg {
    background: #007DB2 !important;
}

    I hope this helps...

    Good Luck!