Need style option to change margins around bubbles

[stevospinks]

I'm facing this issue:

On the left is without any styling changes, on the right is my fixed version using this CSS rule set:

#webchat .content .row {
    margin-left: 0;
    margin-right: 0;
}

It would be great if this could be added to the style options

[corinagum]

Related issues: #1556 #1466

Hey @stevospinks, do you have another CSS framework or styles applied that may be causing the change in margin? On the linked issue above I believe that's what was causing the problem for users.

This seems to be an issue our users are coming across pretty consistently. @compulim I'm starting to think we should add this workaround for the benefit of our users. Can we use this thread to discuss?

[compulim]

Note to implementer

• Please add margin-left: 0 and margin-right: 0 to both Styles/CarouselFilmStrip.js and Styles/StackedLayout.js
• Please add comments to say, from time-to-time, CSS framework break something related to element with class name "row"
  • So when we are doing CSS BEM work mentioned here, we are aware of taking these countermeasures out

[stevospinks]

@corinagum On further investigation it's Bootstrap that is causing the issue for me.

The latest version (4.3.1) creates this CSS rule set:

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}