ion-header is fixed, it stays at the top of the screen at all times.
I would like it to disappear with the page as you scroll.
Ive put it into ion-content which works but it has unintended side effects. Does anyone know how to create ion-header so that its not fixed to the top at all time and moved with the page ?
How about
<ion-header *ngIf="hide">
While you capture the event and do
this.hide = !this.hide;
Tested with a button click event, and works :)
Same can be changed using Simple CSS Class, but it's up to you as per your requirements.
<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">
in the onScroll function code behind you can toggle the "hide"
onScroll(event:any) {
console.log(event);
this.hide = !this.hide;
}
variable to show/hide the header.
Also, the following ionic-4-how-to-scroll-to-top-bottom-using-ion-content-scroll-events may be helpful for you as to how to scroll the content.
Related
Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier.
Let me explain!
I opened a Bootstrap Modal by clicking on the 'Add Make' button.
Modal just appeared properly, and it have a form having up to 5 inputs.
See attached image
Note: Still modal is working properly on scroll.
Now I just entered values in these inputs. And there are 2 inputs of type 'file', which I am using to upload a Image (One for 'icon' and Other one is for 'thumbnail'). And I am also showing these images underneath each of this input of type file. Which is a kind of preview box for me to show that Image which is going to be uploaded.
As that preview box is hidden by default. And when we select a file then that preview box appears with the selected image.
See attached image
Note: Now, modal height has been exceeded than before. And has gone
out of windows height. And now our modal should scroll along with our
windows scroll-bar on scrolling. (This is the common behavior of
modal)
But, in my case, Modal is not getting scrolled properly. I just scroll down, and it scroll back automatically.
In short, I am facing a scrolling issue with my modal after adding dynamic content to my Bootstrap modal which change modal's dynamic height.
I have tried many solution but still failed to resolve this issue.
I have tried the following:
Adding overflow-y = auto
adding overflow-y = scroll
Note: Even already, I have overflow-y to auto.
I have added following
<div class="modal-dialog modal-dialog-scrollable">
But, still failed !
Finally, I'm here to post my issue!
Please remember to include your code when asking question Bilal. For now you could try adding .modal-dialog-scrollable alongside .modal-dialog in your HTML. Ths will add a scroll bar to the modal.
class=" modal-dialogue modal-dialog-scrollable"
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I was not able to find how to change the position for top for the latest reveal modal in foundation 5. Seems I have to make a change in the *.js file, but where?
If you are encountering the issue that the top position of the modal is not matching your needs, try to add the following to your css.
.reveal-modal-bg {
position: fixed;
}
.reveal-modal {
top: 150px !important;
}
This will make shure that your modal and your modal background are always on top - and not somewhere off the viewport.
The thing is that - as I think, reveal positions it self under the position you have clicked with the mouse. So if you open the modal with a click on a link at the bottom of your page, it opens Npx under the point you have clicked. This caused my modal to cinda vanish of the viewport. But I have fixed it with the css code I posted above.
Hope It helps you.
Now to your original Question. If you want to change the Javascript of the reveal modal, you will have to include the single js files of foundation - what means not the foundation/js/foundation.min.js but the single files you need in your project - eg. foundation/js/foundation/foundation.js and foundation/js/foundation/foundation.reveal.js. Then you can make your changes in the foundation/js/foundation/foundation.reveal.js file. I think you are looking for the show method, which starts at Line 300.
Hope this helps, good luck! :)
You can change the Sass variable:
$reveal-position-top: rem-calc(100);
The default is 100 (modal opens 100px from top of screen).
I have noticed that this new horizontal scroll bar at the bottom which I am unable to remove. I have attached an image in which i have also clearly marked the scroll bar which i am talking about. I know there is canvas setting in app settings but that is for the scroll bars above this one. When i scroll the marked scroll bar to the right the chat & notifications also get scrolled something which didn't use to happen before.
This is a reported Facebook API bug: http://developers.facebook.com/bugs/182748101891780
You can add to the "fb-like" attribute data-width="100px" (or whatever width you like) and it solves this issue.
Found the problem to be this element from FB ui, in the right column:
<div style="width:246px; height:69px; " class="_56vv _56vw" id="u_0_j">
It's the Recommended Games block, which has a carousel inside it. It should have a overflow:hidden in CSS. Tried to access it from my app via javascript, but FB blocked it.
This is the solution I used since this issue was making me crazier.
I use Stylish to customize Facebook, and I have a style installed that blocks all the useless crap on that site, i.e. friend recommendations, ads, unused navigation items on the left, etc.
All I did was find the DIV that holds the entire right sidebar and disabled it. This effectively got rid of the scrollbar and centers the main content within the middle DIV.
Here's the line I added to Stylish:
#rightCol {display:none;}
And just for your reference, here's the whole list I use for Facebook:
.rightColumnWrapper {display:none;}
#navHome{display:none;}
#pagelet_ego_pane {display:none;}
#pagelet_friend_list_suggestions {display:none;}
#appsNav {display:none;}
#pagelet_ticker {display:none;}
#fbSidebarGripper {display:none;}
#pagelet_welcome {display:none;}
#rightCol {display:none;}
.groupMemberSuggestionsList{display:none;}
.groupRecommendationsList{display:none;}
Hope this helps if you haven't already found a solution.
I'm using a GWT popup panel for displaying some information stacked up vertically in my jsp page. The problem I'm facing is that, once the popup panel is displayed, it doesn't hold on to its set position. I'm setting the position of the popup panel using setPopupPosition().
However, whenever the user scrolls the browser, the popup panel displayed moves up and down accordingly. It doesn't maintain its original position, where it was displayed.
I've tried setting the css property to (position: fixed;) applied on the popup panel, but it doesn't work. I read someplace, that in order for an html element to be displayed statically, we can use the position: fixed, and width: 100% to achieve that. But in my case, I can't set the width to 100%, since I need the popup panel to be displayed for a specific size.
Is there a way to achieve the fixed position of the popup panel in GWT? Would I have to listen to browser's scrollbar events in order to fix the position or can it be handled differently.
This is my piece of code, which I use to set the popup panel's position in GWT.
final PopupPanel simplePopup = new PopupPanel(false);
_beamMenu = simplePopup;
rendererDisplay(response, simplePopup,true);
int left =_beamIcon.getAbsoluteLeft() + _beamIcon.getOffsetWidth() - simplePopup.getOffsetWidth();
int top = _beamIcon.getAbsoluteTop() - simplePopup.getOffsetHeight();
simplePopup.setPopupPosition(left, top);
Any help in this regard will be highly appreciated.
Many thanks,
Asheesh
add a css with: position: fixed !important;
The default behavior of the PopupPanel should be enough. You actually want position: absolute and not fixed. (See http://www.quirksmode.org/css/position.html for an explanation of position types, but fixed is when it appears to float as you scroll).
The issue you are likely running into, is that when you show the PopupPanel, it gets removed from wherever it was in the DOM, and added to the RootPanel:
(This is from GWT 2.4 so your exact code may very)
public void show() {
if (showing) {
return;
} else if (isAttached()) {
// The popup is attached directly to another panel, so we need to remove
// it from its parent before showing it. This is a weird use case, but
// since PopupPanel is a Widget, its legal.
this.removeFromParent();
}
resizeAnimation.setState(true, false);
}
...
public void setState(boolean showing, boolean isUnloading) {
...
RootPanel.get().add(curPanel);
...
}
As a result, though the position: absolute should be enough, likely your other top level Widgets are also absolutely positioned. Therefore, when you scroll the page you are likely actually scrolling the contents of one of your other widgets, and the PopupPanel is stuck to the outer element, which does not have a large offset-height and is not being scrolled. This is why it appears to have the same behavior as if it were using fixed positioning (i.e. always XX pixels from the top and side of the browser window).
Go back and look at your page construction and fix the other Widgets and you should be fine. From my observations, the new LayoutPanels use position: absolute all over the place, so you may have to manually set it to relative.