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
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.
When I use Hflex property in a included page in a MVVM approach, it doesn't work.
The problem happens when I include some page inside another, and this page has components whose sizes are controlled by hflex property. I already tried to force the rendering of the components using invalidate on parent window load, or Clients.resize(component) when it is created inside the viewmodel class, but with no success. It just happens in this case: pages included in a MVVM scenario.
Here is a way to see the error: http://zkfiddle.org/sample/3bj6e5j/9-Hflex-not-working-with-include-pages-inside-div#source-1.To see the problem, click in the "Open" label, then a combobox is shown. You can see that the size of the combobox is only updated after resizing the browser window or after clicking in the dropdown button
If I explicitly resize the browser window, then the components are correctly sized.
Could anyone give any idea on how to solve it?
It's actually the javascript who does the fault,
Let me explain more. First you set the src of the include correct.
This is before the javascript is called, and your div don't really have a width at that moment.
So it takes that size, what you see.
Then the javascript is called and and actually he show's the div, but with the rendered with of the include at that moment.
How can you fix it : use zUtl.fireSized.
Here is your working fiddle.
I am using a DatePicker along with a ListPicker in my Nativescript application. However neither of these elements display correctly. I've had to blank out some sensitive information from the screenshot, but the issue is visible in the DatePicker.
It seems that the values are offset, and I cannot find out what is causing this. Has anyone else come across this issue before? Or have a fix for it?
These elements are of utmost importance to my project.
This happens because the component is inside tag ScrollView. If I remove it, works. I have tried remove padding and margin of ScrollView and nothing.
The inner StackLayout is required for the ScrollView to work properly. If I have more than one element (such as an input form - which is the scenario in my application), only the last element is displayed without the StackLayout.
I got another problem with Neos. Whenever I try to add a new Page/Shortcut/... the Backend, the top left area becomes mostly unuseable. Top left area after I tried to add new elements
I cannot switch pages, but can edit the current page.
When I push things to live, or refresh the site, the added 'null'-pages disapeer.
Copy/Paste works without problems.
As long as I not try to move things in top left area no error appears.
And no javascript request or network traffic is visible when creating new page elements.
But I don't know how to get rid of this and even don't know where to start search.
Hope you help.
Nice, with a shot in the dark(hope that I used that right) I,ve figured it out. Somwhere in my CSS was something that was in conflict with Neos, so that the inputfield disapeared.
So the solution for that problem was to disable all my css.
I was having the same problem as this question:
jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible
The above question solved my problem by telling me to use 'http://code.jquery.com/mobile/latest/jquery.mobile.min.js'. That solved my original problem but caused another.
The select menu is always displayed and doesn't center on the select item like it did before.
After:
Does anyone know how to fix this. I think I might be able to hide and show the menu if that was the only problem that I was having, but even when selected it is not in the right position. It should be centered over the select element both horizontally and vertically (if given enough vertical space).
This is caused by the latest release of JQuery, but I also can't download 1.1.1 because it causes the original problem that I had which was solved in the other question.
Looks like the menu is displaying relative to the rest of the content - Try adding a css line on there
position:absolute;
on the menu structure - Another good way to test this would be to load up your site in google chrome and use firebug to see why the menu is positioning lower than the "click point." Just on glance it appears that the menu is appearing relative.