I have being trying to resolve this issue for more than 9 hours but have no idea how to solve it even in angular js material demo site this problem is occuring.
My problem is with body scrollbar getting hidden when the md-select dropbox is open. Does anyone know how can i get both scrollbar working at the same time. I am using angular js material 1.1.0
Here is a demo with the issue.
Codepen Demo
When you click on a select, the rule :
position: fixed;
Is applied to the body so the scroll-bar is removed, so you need to override this rule by this one :
body {
position: static !important;
}
Here is your codepen with the scroll-bar.
Related
I am trying make modal window in reactjs with bootstrap 4. When I use bootstrap 4 I have problem with css formatting with close button. When I use bootstrap 3 css are ok.
There is my code . Thank you for advice.
Add this style
.modal-header {
display: block;
}
The display : flex on the model-header is causing this issue. So override this style.
Updated Code
I'm using angular bootstrap https://angular-ui.github.io/bootstrap/ with class table-responsive. The problem is on the datepicker will display inside the table such as picture below:
I could fix it with:
.table-responsive {
overflow: visible;
}
and it will nicely work:
Now if I add the fix above, my display in mobile will end up like this:
It will not become scroll able and it will overflow my screen. How do I fix this?
Please help me and thanks in advance.
Use datepicker-append-to-body="true" with the popup version to have it linked to the body. It will appear above your table nicely.
Here it is, in a plunker.
after clicking on any of md-dialog buttons (ok,cancel,create..) the dialog it self diaper but a <div class="md-dialog-container"></div> which is part of the default dialog code dose not diaper and act as a cover to the all web page, turning it unresponsive..
i have found this link https://github.com/angular/material/issues/3782 but the solution suggested doesn't seem to work..
any advice would by highly appreciated
i ended up using some basic js to solve this problem
js:
$scope.removeDialogContainer=function(){
$('.md-dialog-container').addClass('display-none-md-dialog-container');
};
css:
.display-none-md-dialog-container{
display: none !important;
}
adding this code ($scope.removeDialogContainer()) to the relevant dialog buttons seems to work
in my opinion it's not the best solution, would have preferred a css or html solution, not using js..
I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.
I have:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
the modal opens at the top, without animation whatever i set for animation or placement
Am i missing more css or js requirements not in the docs?
Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
This is actually mentioned on the github page but not in the docs so i missed that.
The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:
data-placement="center"
.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css
or just copy the part for centering modals:
.modal.center .modal-dialog {
position:fixed;
top:40%;
left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
toggle functions only fire on the second click. I had this problem some time ago with a datetimepicker libary. Now the problem exists with bootstrap.
Here is my Jade-Code:
ul.nav.navbar-nav.navbar-right
li.dropdown
a(href="#", class="dropdown-toggle", data-toggle="dropdown") Einstellungen
b.caret
ul.dropdown-menu
li
a(href="#") test
The dropwdown only toggles with the second click. And dont no where i have to search to find the mistake. Is there maybe a code to detect what is happend with my first click?
When is user the css to collapse on hower it works fine, with the first hover :(
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
margin-top:0px
}
The project is to big to post it on Fiddle :(
I hope you can give me some advices.
Thanks!
One option might be using the angular-ui-bootstrap route instead of trying to get vanilla bootstrap javascript to work with your angular app. Below is a link to the angular-ui-bootstrap site; try implementing one of the angular-native directives for a drop down and see if that does the trick.
http://angular-ui.github.io/bootstrap/
Aside from that, it's hard to help if we can't recreate your problem. Can you try recreating small version of the problem in a codepen or jsfiddle?