I have two problems with my page.
First:
I have 3 hover-able buttons on right side of my page. They should work like these buttons, but on my page you can scroll to see their position "outside" of the page. I guess there is problem with display, but I don't know how to make it right. Does someone know how to fix this?
Second:
When you zoom enough (bellow max-width: 992px) my navbar will move to sideNav and there should be collapse button "Přihlásit se", which should activate collapse from bootstrap and show the form, but that doesn't work too... I don't know why. :/
There is a page!
about buttons there is many ways how you can achieve such behaviour, but based on your current markup with quick fixes, you should look into adding overflow: hidden to the container, for example body in your case and move buttons block(.SideIconNav) to absolute position, .main to relative and don't forget about z-indexe's
about form - you add event.stopPropagation(); on #mySidenav which canceled click event before it fired on the button
Related
I have a list of items that appears inside a modal on my page. I want to be able to access extra options (i.e. delete, rename) on each element by swiping the list element to the left to reveal the options underneath.
I have created a working simple swiping animation using javascript and the css translate attribute, but the element goes off the edge of the modal when I swipe it, which I don't think looks good. I want it to stay inside the modal and go under the edge whenever it is swiped to the left.
Here is a diagram of what I want:
My first thought was to add a colored box just outside the edge of the modal, but that would obviously show a big square beside the modal. Perhaps there is a way to "chop off" part of an element somehow. How would I do this?
I can't really understand what you want, like I have no idea what those green boxes are for. But to my understanding, it seems like you just need so that the swiped element don't go outside the modal right? if so, you just need to add overflow: hidden to the modal/container class. That way, anything that goes off will be hidden. If you still want the modal to have a vertical scroll capabilities, then use overflow-x: hidden
I have a parent component that has 4 child components inside of it, each of them a primeNg panel with a form inside of them. The first 3 panels are expanded at all times(the collapse and expand icons are set to empty strings) and the last one is collapsed on load. On the last panel, I have a button that allows you to "Edit" the information which appears inside it and expands the panel.
What I would like is for this 4th panel to then get pulled to the top of the screen. However what actually happens is the panel expands and the scroll bar moves up, but the panel itself stays put.
I have tried several different options to get this working using various combinations of scrollTop, offsetTop, scrollIntoView, etc but nothing has worked. The scrollbar moves but the content does not, it stays where it was.
I even tried to set the id to an element half way down the form on the last panel and then used scrollIntoView: {block: 'center'} as an option...still nothing, same thing, it scrolls the scrollbar but not the content.
Can someone help me out with this and let me know what I am doing wrong?
in parent component:
<p-panel1></p-panel1>
<p-panel2></p-panel2>
<p-panel3></p-panel3>
<p-panel4 id='scrollToHere'></p-panel4> <---I want to scroll p-panel4 to top of the window
when the edit button is clicked
UPDATE:
Got it fixed by using setTimeout(document.getElementById('scrollToHere').scrollIntoView({behavior: 'smooth', block: 'start'}),0)
gotta be one of those weird DOM things where it tried to scroll before the panel was expanded...will try and change it to onAfterToggle but not sure if that will work because I am not using the icons and using a button to do it.
#Matte the scroll into view should work. But it seems that the scroll into view is triggered before you contents are expanded so try with some delay. And there should be more page content below your last panel if there is nothing and it is the last thing on page then the page would not scroll to the top of the height is smaller then the screen
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I want a panel with a start button in the middle of the page. When the button is clicked the panel should move up and disappear. The content of the page should start loading after the button is pressed. Something like a start button for a game.
Currently I use two html pages. The first is the panel(index.html) and the second is the content. When I press the button it moves the panel up, removes it and loads the second page. It feel a bit clunky so I wonder is there a better way to do this?
I'm not sure if this works for canvas. As I said in the comments I suggest doing a text-align:center;. This works for text and buttons. To center other elements such as divs try margin: auto;. Good luck with canvas :-)
I would also suggest expanding your css knowledge because text-align is very common to use as well as margin:auto;.
I have a simple dropdown submenu that I show when you hover a list element of a horizontal menu.
I position the dropdown submenu by setting relative position to LI parent and absolute position to the container of the submenu.
Then I show the submenu by listening to mouseenter with jquery and I hide it by listening to mouseleave.
At first looks like everything is working fine, but after adding some content to the submenu so that it now has like 100px height I'm starting to have a problem:
The mouseenter runs fine but the mouseleave gets fired a lot before reaching the end of the submenu, it gets fired when I'm half a way to reach the end.
Why is this happening?
I'm answering my own question even if I did not provide code examples, I just want to explain the situation and what was going on.
Looks like the content I had after my main horizontal menu, had a default z-index that caused it to be placed on top of my dropdown.
So what was happening is that when I was going down with my cursor when I reached the content after my horizontal menu, even if I had not reached yet the end of my dropdown, I was somehow with my cursor off my dropdown because of the z-index.
So my solution was to test with some z-index added to the dropdown, such as z-index: 11, and it worked! The z-index you should set in your case could vary depending on what positioning and z-index has other content on your page.
Hope it helps someone!