Working with a Angular js modal with a dropdown menu. The menu list is pretty long. In 70% time the menu arriving in lower direction then its ok. but approx in 30% time the dropdown menu arriving in upper direction, then some parts of my list is going hide. is there any way to make it always in lower direction???
Can you provide some code? Do you use external modules? Bootstrap maybe? I can only guess it's more like CSS issue. Try this:
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
}
Related
I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.
I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS trick's Simple jQuery Dropdowns. (As I couldn't get a pure css one to work on touch devices as they relied on hover states.)
I have made a little bit of progress fiddling with ul.dropdown ul {top: -100%; } but this only moves the dropdown up one 'row', I am not convinced that's semantic css.
Any ideas how I could achieve this ?
I have made a jsfiddle of the problem here - http://jsfiddle.net/TTTb6/
Try changing this:
ul.dropdown ul {
bottom: 100%;
}
Updted jsfiddle
Instead of top, use bottom: 100%;:
ul.dropdown ul {
position: absolute;
bottom: 100%;
}
For touch devices you need to write code in click event. please check this one here you will get your answer...
Click to close jQuery dropdown menu on mobile devices while retaining other behavior
I am create a WYSIWYG editor in my free time. I decided I wanted to use the drop down to allow myself to select formatting. The problem is when I add a dropdown it isnt under the button but at the beginning of the the button container.
here is an image to show what I mean.
The first button looks active because the text is aligned left... Sorry I tried to find a way to fix that but the dropdown is from the last button.
My question is, is there a way to align a Twitter Bootstrap Dropdown, with the button it is supposed to be on or atleast make the dropdown with the width of the button container.
Yes. You can just add a rule, left: auto; right: 0; for the <ul> coming there, by targeting or giving a class, say .right-menu, this way:
.right-menu, .dropdown-menu.right-menu {left: auto; right: 0;}
A working demo of the same would be in jsFiddle.
It's not a bad thing to use .pull-right on the .dropdown-menu to make it stick to the right of the container.
As seen in the source, this class is meant to do that :
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
If you prefer to make it as big as the container, you can try applying this to your menu :
.dropdown-menu {
min-width: 100%;
}
You should keep .pull-right in case you have bigger menus.
Check the fiddle demo
So I have some problem with the way the pagination buttons remain in the same place(at the bottom) even though there are only 2 entries in the last page
http://srikanthrajan.com/test-table/tablesorter.html
Can I do something about it so that the pagination buttons move on top depending on the number of entries?
currently it is positioned as "absolute" in css, try to change it to relative
instead of top: 280px; position: absolute;
write these in style:
clear:left; float:left;
and also dont forget to float the table to left as well, hope this helps!
Script Title: dropline menu
Script URL: http://www.dynamicdrive.com/style/cs...rop_line_menu/
I got the menu working just fine, however, I discovered that when I have the stumble upon toolbar on, the submenu suddenly is placed about 22px lower than it should be. Sometimes this increases to multiple times that difference. You can test out this behavior for yourself in Chrome browser, having the stumbleupon toolbar enabled and hovering over one of the menu items which has a submenu: http://kwestievan.nl/unityexpress/
How can I fix this? I checked if body.offset().top was the problem, but actually that one is higher than the difference: 32px, while the difference in the menu is only 22px.
The reason the sub menu is lower beacuse the element
<ul class="sub-menu"</ul>
is being given a style of
position: absolute;
left: 233px;
top: 224px;
What this does is place the sub-menu "RELATIVE" to the browser window as such that it is 223px from the left and 224px from the top of the "browser window". This works fine when there is no "stumbleupon" toolbar. However when you do add the stumbleupon toolbar, it adds the toolbar in the form of a iframe element. The height of the iframe element than causes the sub-menu to be pushed down since the dimensions of the browser window have changed.
You can quickly test this by finding out the height of the "stumbleupon" toolbar and than comparing that height to the amount of distance the sub-menu has pushed down on you monitor/screen resolution. They will be same.
The solution is to give the element
<li id="menu-item-1738"</li>
a style of
position: relative;
and than style the sub-menu so that it aligns and is "absolutely" positioned "RELATIVE" to the containing li element. For example
position: absolute;
top: 20px;
left: 15px;
Offcourse all this is being done by your script. I am not sure why are you using javascript for this. This can be easily acheived by CSS alone.