I have a few basic controls that are anchors with no urls, such as
<a id="UP" href="#">UP</a>
there's jQuery stuff attaching it to the click event (it's a jcarousel control with overflow hidden)
I understand that onclick needs a return false on it to stop scrolling to "#" on the page to that anchor. The issue is that on fresh load, no scrolling and the UP click all in view, the page still moves. Worse, it appears # has 3 or 4 different places! As I click UP repeatedly, the page moves up and down a few pixels as i click and click. This is always different than the absolute top where the page originally rendered.
Is it the overflow of the list that is no longer visibile due to the clipping causing this? Would adjusting heights of the elements so that the list items clip out evenly provide a stop to this? or is there some other ie8 flaw i'm not aware of?
Thanks!
After a bit of trail and error, I figured out that I needed to 'return false' the click handler so that it stopped the chain of events from continuing (ie, following the hash).
Further, I adjusted heights on the wrappers and clippers so that they were even, as that was the kicker on the 3 or 4 differnt height moves
Related
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 am developing my first Flutter app and have a question that I'm not finding an answer to:
I have a static fixed area at the bottom of my screen. Various buttons will be shown here depending on the page. I am using a stack to place this area on top of the rest of the screen, with the page content scrolling underneath my buttons.
The problem I am having is that the button(s) is/are sitting inside of a DecoratedBox, which in turn is sitting in front of my page content. This means that this box is blocking me from clicking on anything below the fixed area (like the button labelled "Programs" in the image)
I have come across the IgnorePointer and AbsorbPointer classes, which allows me to set the decorated box to ignore events. The problem here, however, is that it also causes the buttons in this fixed area to no longer react to events, as they are of course children of the box that I am applying the Igonre/AbsorbPointer classes to.
Is there a way to make the parent decorated box ignore events but have it's children react to them normally?
(blue area must ignore events, and the button must react to events)
Any advice would be greatly appreciated
I think this link should help you solve your problem. I haven't tried it.
Flutter: How to make a ListView transparent to pointer events (but not its non-transparent contents)?
In Chrome 80 the devtools now seems to auto horizontal scroll, to the right, to the content in tree views, but not back to the left when navigating back to a parent node. This makes the Elements tab very difficult to use with Word Wrap disabled. I mainly use the Elements tab to highlight elements to view the styles or to see the the parent/child relationship of the nodes. Word wrap makes it hard to view the hierarchy, because a node with many attributes will just take up all the horizontal space when it wraps. Now every time I click a child element I have to manually scroll back to the left to see the start of the parent nodes.
I don't know if this would be considered a bug, because I could see scrolling to the content useful in some places, but it has made the Elements tab difficult to use. Does there happen to be a way to toggle this feature to make horizontal scrolling manual only, because if I need to scroll I will just use the scrollbar myself.
Update:
This is fixed on canary now. The commits that broke and fixed it are referenced from the issue I reported here: https://crbug.com/1050868
I have created a component in my project that is purely an ion-slides UI component. I've injected into the main page of my side-drawer template app and I'm experiencing a number of issues/annoyances:
The content doesn't always center within the main pane. It seems as though the width of the individual ion-slide items all get set with an inline element style width that is greater than the pane width! I've realised that this only happens when the whole app is loaded. If I click on the side menu item of the page to reload it individually, the issue disappears. This leads me to believe it's an issue with the order that components are rendered. Can anyone help me understand what is happening? Is it a bug?
Undesired behaviour
I can't work out how to get navigation arrows to display/work - is this possible?
https://stackblitz.com/edit/angular-ionic4-test-yuppm1?embed=1&file=src/app/app.module.ts
The above Stackblitz should help to give you an idea of my setup but it doesn't show the problem I'm experiencing. It does show one other peculiarity though:
With loop set to true in the options, when you get to the last slide and you go to the next slide, it jumps to second element rather than the first! Any help on understanding why this is happening will be appreciated.
Thanks
On opening a standard VCL form from our application, several controls are moved or resized slightly. e.g. a few pixels shorter or a few pixels to the left. Saving the form obviously commits these changes. Anyone know what causes this and how I can stop it?
Our application was developed in Delphi 7 and I think this issue has started since we recently moved it to XE7. Having made various code changes to various forms we've started noticing that controls had moved/sized a bit and thought they were mistakes. But today I've noticed that it happens when the form is opened. The form was previously saved in XE7 (it's not just the first open of a D7 form).
The controls seem to be mostly losing a couple of pixels off the Height, Width or Left property. I've not seen any of these values increasing, only decreasing. Not all controls on the form, just a few. The problem isn't limited to a single form. The Form.Scaled property is false.
Is something getting rounded/recalculated? There are 2 developers working on the application - could a problem be caused by developing on different resolutions or something?
Thanks a lot for any ideas =)
EDIT! Viewing a diff of the changes that were applied, I think poss all of the controls adjusted have non-default anchor settings. e.g. a button moved 2 pixels left is anchored [akTop, akRight]. It's on a panel that is anchored [akLeft, akTop]. Another control that lost 2 pixels from Width and Height is anchored [akLeft, akTop, akRight, akBottom]. I have just reverted the changes, changed the anchoring by editing the dfm and opened the form again: The control that moved previously didn't move. I'm certain it is related to anchoring.
EDIT2! Easy to repeat! It is related to the anchor of the control and the BorderStyle of it's parent control (TPanel). Add a form with a TPanel and add a TLabel within the panel. Set the TLabel to anchor [akTop, akRight]. Set the TPanel to have no bevel, CTRL3d=False, BorderStyle=bsSingle and BorderWidth=1. Note the Left property of the TLabel. Save the form. Open it again. Look at the TLabel's Left property. It has moved 2 pixels left. Keep on opening, saving and closing the form and watch the label move from right to left. Here's a pic of my example form