Floating Actions - background of floating items not transparent

Hello, I'm sorry if there is already an answer to this, i kept looking but couldn't quite find exactly what i was looking for

I'm trying, using CSS, to change the background color of the floating items so that it wouldn't be transparent.

could anyone help me with the SCC needed to add to the extended class of the floating action?

much appreciated!

 

mvp_badge
MVP
Solution

Hi CincoMariposas,

In addition with Vani's comment, I would also suggest you to chain the .is--open class (extendedClass css definition will only gets applied when the floating action is in open state) with the custom extendedClass CSS definition as mentioned-below:

  • As shown below, include 'custom-floating' custom class as FloatingActions widget ExtendedClass property value 

CSS Snippet (Define in Screen Style Sheet Section)

.custom-floating.is--open .floating-items{
    background-image:
    linear-gradient( #ffb6c1, #f06d06);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
}


See this Custom FloatingActions Demo


Hope this helps you!


Kind regards,

Benjith Sam

Thanks to the both of you guys, and thanks for the tip on "is open"

cheers!

Hi

Try overriding below class and add background color to it.

floating-items {

    background-color: blue; - ( Apply background color as per your requirement)

    -webkit-box-align: end;

    -ms-flex-align: end;

    align-items: flex-end;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    padding-bottom: var(--space-s);

    padding-right: var(--space-s);


}

mvp_badge
MVP
Solution

Hi CincoMariposas,

In addition with Vani's comment, I would also suggest you to chain the .is--open class (extendedClass css definition will only gets applied when the floating action is in open state) with the custom extendedClass CSS definition as mentioned-below:

  • As shown below, include 'custom-floating' custom class as FloatingActions widget ExtendedClass property value 

CSS Snippet (Define in Screen Style Sheet Section)

.custom-floating.is--open .floating-items{
    background-image:
    linear-gradient( #ffb6c1, #f06d06);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
}


See this Custom FloatingActions Demo


Hope this helps you!


Kind regards,

Benjith Sam

Thanks to the both of you guys, and thanks for the tip on "is open"

cheers!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.