Forum Discussion

Jhansi_k's avatar
6 years ago

Unable to click on a button in standard component

Hi,

We have YES and NO button in any article in our community page, It was built in standard component. Previously both the buttons are working but now NO button is not working. Unable to click the No button.

I see the issue is caused by "no-wrap" property under

.TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-left, .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-right {
padding: 5px 10px;
white-space: nowrap;
}

This: lia-quilt-column lia-quilt-column-08 lia-quilt-column-right lia-quilt-column-footer-right is covering over the no button which is then stopping the user from clicking the button.

As soon as I uncheck the white-space: nowrap will then allow the user to click the no as it is then not hidden by the footer right.

if we remove the white space it leaves the Yes and No button in an awkward place.

So the fix should be the following.

Remove whtie-space property from

.TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-left, .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-right {
padding: 5px 10px;

}

and Adding

.lia-quilt-column.lia-quilt-column-16.lia-quilt-column-left.lia-quilt-column-footer-left {
margin-top: -20px;
}

 

So if the do the above changes in developer tools it's working fine, but if add this changes in one of our skins it's not working.

Could anyone help me what changes I need to update to make it work.

 

Please find attached screenshot of NO button for your reference.

 

Thanks,

Jhansi

  • Jhansi_k,

    You css code should be like below the one I have added for css file.

    Show more
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-left,
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-right {
    padding: 5px 10px;
    white-space: normal;
    }
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column.lia-quilt-column-16.lia-quilt-column-left.lia-quilt-column-footer-left {
    margin-top: -20px;
    }

    After looking to the screen-shot your skin name should "Highered", this skin is where you have to add this css.
    If you don't know on which SCSS file you have to add your css in "Highered" Skin, you can add this in this file with name "_style.scss".

     

1 Reply

  • Jhansi_k,

    You css code should be like below the one I have added for css file.

    Show more
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-left,
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column-footer-right {
    padding: 5px 10px;
    white-space: normal;
    }
    .TkbArticlePage .lia-quilt-tkb-message .lia-quilt-column.lia-quilt-column-16.lia-quilt-column-left.lia-quilt-column-footer-left {
    margin-top: -20px;
    }

    After looking to the screen-shot your skin name should "Highered", this skin is where you have to add this css.
    If you don't know on which SCSS file you have to add your css in "Highered" Skin, you can add this in this file with name "_style.scss".