How to open bootstrap-dropdown when i click on cell within ng-grid ?
I can open it only partially.
Here's plunker
I think you need to add this to your CSS:
.ngCell {
overflow: visible;
}
which allows the ngCell to display the drop down like you want. The issue that I'm having is getting the drop down on a lower cell to appear over the ngGrid footer rather than increasing the size of the scroll bar.
This CSS worked for me so something in this direction will hopefully work for you
.dropdown-menu {
position: fixed;
display: block;
margin: 22px;
top: auto;
left: 0px;
padding: 0px;
Related
Before my english a little. So I am sorry.
I try a dropown menu with css. When completed the menu, as below image final view.
Sub menu list must be side by side.
But my problem. My list are not happening side-by-side in sub-menu class.
EDIT
If I write a constant width for #dl_menu .sub-menu everything is ok. But my .sub-menu maybe possible 3 item, maybe 6 item and my sub-menu is width change it. isnt' it. ?
So I can't write constant width.
Example as this link.
http://jsbin.com/fulekulo/7/edit?html,css,output
Thank you for help.
Thank you.
Change Your Menu CSS Like This
#dl_menu .sub-menu {
display: table;
position: absolute;
padding: 0;
right: 0;
top: 40px;
float: left;
width: 304px;
left: 0px;
top: 30px;
}
#dl_menu .sub-menu{width:400px;}
http://jsfiddle.net/kisspa/dsx8R/
I have three buttons on my web page. On the click of one button, a process starts, and after a certain period of time, an alert will show "process complete".
How do I lock the screen from any further user input until that time?
The easiest way would be putting a div element on top of everything else, with a very high z-index.
<div id="blur"></div>
CSS:
#blur { position: fixed; left: 0px; right: 0px; bottom: 0px; top: 0px;
z-index: 999; display: none }
The display: none is so it doesn't show up right away. Use JavaScript or jQuery to change the display property to "block" (or use jQuery's .show()).
For further effect, you could give it a slightly transparent milky background:
background-color: rgba(255,255,255,0.5);
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
I want to do a navigation with list elements formatted as table so the width of all elements is the same but it won't work for Firefox.
HTML:
<div id="#navigation">
<ul>
<li>
<a>Menu1</a>
<ul>
<li><a>Sub1</a></li>
<li><a>Sub2</a></li>
</ul>
</li>
<li><a>Menu2</a></li>
</ul>
</div>
CSS (some properties are missing but only such things as color...):
#navigation {
position: relative;
height: 25px;
width: 852px;
}
#navigation>ul {
width: 850px;
top: 0px;
padding: 0;
margin: 1px;
list-style-type: none;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
#navigation>ul>li {
position: relative;
height: 25px;
display: table-cell;
}
#navigation>ul>li>ul {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation>ul>li>ul>li {
/* nothing really happening here */
}
JS Fiddle:
http://jsfiddle.net/ZrsXv/2/
Everything works fine in Chrome, Safari, IE8 and greater and with some modifications also in IE6 and IE7
But in Firefox I will always get this
I know I'm not the first one having Problems but I have also tried solutions I found on stackoverflow but if something is changing this is everything I get
So is there a solution that won't mess everything up?
I think your problem is that position: relative; doesn't really work on table cells. I couldn't find a source at the moment but I'm pretty sure I have experienced the same problem before.
So what is happening in Firefox is that the width of #navigation>ul>li>ul is calculated as 100% of #navigation which is the closest ancestor with a position value other than static (default position value).
You can go around the problem by inserting a dummy element with position: relative; (f.ex. a div) inside #navigation>ul>li and then #navigation>ul>li>ul must be changed to #navigation>ul>li>div>ul
The easiest solution is to reference already-existing examples of menus built from nested lists.
http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/
I'm not really sure why you're using display: table, either; it's been a while since I last made a multilevel menu myself, but I never used that display method, and none of the examples I found after a brief search did either.
Reading other answers and comments I understand why you're using display: table and it could be acceptable...
I tryed different solutions and nothing work for Firefox so, if you are interested in using this method I can suggest to give the fisrst li element width to the children ul using javascript / jQuery like I did in your jsfiddle here
Otherwise I can not help you in a different way... sorry.
I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).
The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):
Looking at things in Firebug, here's the drop down rendered in an unordered list:
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
The autoCompleteList class looks like this:
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
And the resulting div for the modal popup looks like this:
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
With the following modalPopup CSS class:
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
My assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)
Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by the Ajax Control Toolkit using !important?
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
I know it's a bit of a hack but if you haven't tried it yet it might be worth a shot?
Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.
I have came across same problem.
My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.
Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.