I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.