Folks,
So I am using a angular dialogue box, however, setting custom size for this dialogue box ruins the format inside the box.
I have created a plunkr for this. http://plnkr.co/edit/yXf1kNMqhAdo3iM8dFBy
If you look at the "save" and "cancel" buttons, they appear somewhere near center of the page even though they are part of modal-footer.
Does anyone know how to resolve this.
Thanks in advance
They are appearing to the right because modal-footer has a css property set as text-align: right. They flow off of the plunker because model-body is being set as 800px in your code here: modal.css("width",'800px');.
You can add a style to override this if you want:
.modal-footer.left
{
text-align:left;
}
Updated plunker
Hope this helps.
Related
I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width
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.
I have such an issue. When I click on ui-select the dropdown appears normal. But if I will resize the window the dropdown became larger than ui-select and sometimes ui-select pushes other inputs to the left.
Who faced with this problem? Any solution?
Updated
I found the solution. I have to apply css 'width: 100% !important' to input with class .ui-select-search and thats all. Sorry, it's hard to recreate the problem in plunker.
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?
I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info