I have a p:tieredMenu under which is a p:subMenu which is loaded with a list of p:menuItem. I have the tiered menu on the right corner of the page, so when the sub menu opens, it opens on the right side and moves out of the page.
Please let me know if there is any way to make the sub menu appear on the left side.
I had a look at a similar question How to make twitter bootstrap submenu to open on the left side?, but do not know how to implement that with respect to Primefaces/JSF.
This property will get the menu blocks to appear on the left side.But this will cause all the menus to be on the left side.
.ui-menu-child {
left: -200px !important;
}
You would need to play around a bit to get exactly what you need.
PrimeNG 11
#yourMenuId .p-submenu-list {
right: 100%;
left: unset;
}
Related
I have 0 knowledge about css so this might be very simple for you folks. I am trying to change ionic side menu animation from slide in to slide over. Basically, when user clicks on the side menu, content should not move and side menu should be on top of it. Reason I am trying to achieve this is because i have a cordova google map plugin which will not move when side menu pushes the content and there it looks really ugly.
Any suggestion/solution
I suggest to made your own menu.
Basically you make a div with an absolute position and toggle it.
I made a simple jsfiddle so you can try this. jsfiddle
.mySide{position: absolute; left: 0; width: 40%; z-index: 100;}
Hope it helps.
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
So we're using Cherry Frameworks (ugh) with Wordpress. The third-level navigation is getting cut off. I've tried manipulating the CSS to fix the issue to no avail. There's no option in the framework.
The problem resides in the Services menu. Resize your screen smaller to view the issue.
My solution is to push the third-level nav to the left side instead of the right side. Thoughts on how to do this?
http://dev.torontofamilytherapist.com/
So using chrome's inspect element, I was able to figure out what needed to be changed:
#topnav li .sub-menu .sub-menu {
left: 100%;
margin: -10px 0 0 2px;
}
changed to:
#topnav li .sub-menu .sub-menu {
left: -100%;
margin: -12px 0 0 2px;
width: 100%;
}
The result:
As you can see the items are appearing on the left, but you'll need to do some css tweaks to get them to look juuuust right.
Here's how you can troubleshoot CSS issues like this using chrome's developer tools:
Right click over the offending element, in this case: we are looking at "Services", then select "Inspect Element":
You should now be inspecting the current CSS like so:
Now since these items are appearing when you hover, you'll have to 'force' a hover state.
This is where the fun begins. You'll have to make sure you find the right elements to force the hover on. I actually had a little struggle with this, so I ended up adding the force hover state to many other elements until it finally appeared (the green menu)
Repeated the same process to get the third tier menu.
Now you right click on the actual menu and select "inspect element" again - this time since the menus are FORCED HOVER, the item will stay selected when move the mouse away and you can finally see the actual CSS.
It was actually harder than it needed to be, as the theme really has some counter-intuitive settings to show these menus (why not just on hover?? it really felt like on multiple items hover..)
I have one more problem to solve before I can call my first website done, and I would greatly appreicate the help of this community.
You can see my website for yourself at www.dylanbisch.com
The problem I am trying to solve occurs on the homescreen between the class artdesign and tumblr-wrapper.
Basically, the class "artdesign" contains the two circular buttons and the class "tumblr-wrapper" contains the black and white photos on the homescreen.
My problem occurs if you shrink the browers window and then try to scroll left and right. Instead of scrolling left and right across the entire page, only the black and white photos in the "tumblr-wrapper" class scroll left and right.
I am looking for a solution that would stop the tumblr-wrapper from being the only thing to scroll when the brower window is small, and would create full page left right scrolling.
I hope I have explained by problem adequately, but if I need to explain something differently please let me know.
On line 370 of style.css, you have a position:fixed applied to the .artdesign.
Im not sure what the logic was for putting it there exactly, but if you remove it, the page will scroll as you expect.
The fixed position means that div is fixed and will not move (even if you scroll), its mainly used to stick headers and footers to the top and bottom of pages. (Like the twitter bootstrap page [notice the black header menu along the top?.. thats fixed])
So basically:
.artdesign { /* Line 370 of style.css */
float: left;
padding: 200px 0 0 10px;
position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
width: 579px;
list-style-type: none;
}
You have .artdesign set to "position: fixed" so this will always stay at the same window location. Change this to "position: absolute" and this should solve the problem.
The like button works fine, the recommendation works fine, but there's an issue: the like button is positioned on the right side of the page (which is intended), but when the button is clicked, it opens a box that exceeds the boundaries of the browser, to the right.
Example (with me in the Santa's hat as a doubtful bonus):
I've tried controlling the position using css, with no success. How can i proceed?
TL;DR
I need that recommendation box on the left, not on the right as it is now.
Thank you!
Your problem is in the css. Try using firebug to inspect the elements, you can change properties live to see which ones are the ones giving you the headache.
(edited)
The sidebar container is position:absolute, and has right:0. There's your problem.
#sidebarSocialetContainer {
right: 0px;
margin-right: 10px;
width: auto;
margin-top: -39px;
position: absolute;
}
So, if you put left:0 instead of right:0 you'll see the bar in the opposite side.