I'm building a project using AngularDart and bootstrap. My project includes an NgComponent that is being rendered in a shadow dom. On load there seems to be a 1 out of 5 chance the component will render visibly on the page. The other 4 out of 5 times it takes a browser resize (to where the responsive bootstrap css snaps back) in order to see the component. Is this just some funky css or what?
Usually this is when an error occurs. When you have set class="ng-cloak" Angular hides the content and when the initialization of Angular fails at some point it doesn't come to the point where it unhides the content. Check the output in DartEditor or Development console.
Related
I need to have a section/component of an angular application to simulate responsive view of my form data. For example, lets say I have an angular app that has a form. After filling up that form the form data is then sent/passed to a component Simulate which then renders the form data. The Simulate component has an input which allows the user to switch between mobile, tablet, medium laptop or big screen views, in short the form data needs to be rendered in a responsive way. I know I can just get the height and width of the Simulate component but there is another angular app, say Viewer-App which only takes the form data and renders the data and that app is responsive. So if I just modify the height or/and width of the component the screen width and height is still the same as that of the current device and not of the modified height or width of the component (Simulate).
My question is, how do I go about the Simulate component such that the media queries or the css behaves as if it is being rendered in a specific screen? I have seen many examples using an iframe but none where a component is passed to that iframe and the iframe renders it. I can configure the url of the iframe to a source of the Viewer-App with the appropriate route params to the form data, but that would mean making an HTTP request which I want to avoid.
I am using Angular 9 with Bootstrap 4 (without the JS part, just the grid).
This link has a solution but it uses an iFrame.
This link has an iFrame in a component's template but it doesn't seem feasible in my situation.
I'm using Emotion for CSS in a React project.
It's working correctly but I have one component that uses the css property with JS arguments and it seems Emotion is caching the CSS despite the variables changes.
Here's a CodeSandBox to test the behavior : https://codesandbox.io/s/youthful-lumiere-bfg7o
When you click on the images, the zoom should start from the top left corner of the image.
It works the first time, but after clicking multiple times on one image then another, Emotion is keeping values in cache (I logged the JS values before sending them to Emotion, you can check in the console)
Animation is slowed down to see the bug.
Thanks for the help
My question is quite simple I guess,
I'm at the beginning of a project, and I just finished the Sidenav (positionned to the left of the screen), which I actually use as a component. I want to use a "normal" top navbar when the window is smaller, but I don't know how to actually implement this. Do I need another component for the top navbar ? If so, how do I switch between those 2 based on window size ?
I use Materialize CSS by the way...
I had a similar problem. When I was creating a resume in Angular, I wanted to show mat-horizontal-stepper when the screen is larger than 700px, and mat-vertical-stepper when it is smaller than it. So I created a HostListener to window:resize event.
This is my deployed resume, if you resize you can see the expected behavior.
This is how my HTML with horizontalStepper, at line 23 you can see that if the value is true show something, otherwise show something else.
And this is my component's TS file, at line 36 you can find the HostListener.
I'm displaying mathematical expressions in a webview (using jqmath library and some CSS). One requirement is that expressions should be centred, and here's what I use to achieve that:
<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p>here goes the expression</p></body></html>
Since rendering math takes some time, the webview is hidden while the expression is rendering, and displayed only when it is ready (once the WebViewClient's onPageFinished has been called). This worked well until Android 4.4.
The problem with the new webview seems to be that it only applies CSS when it is visible on screen. So after revealing the hidden webview, the expression first appears in the top left corner, and only after ~0.1 seconds "jumps" to the center. This looks ugly, since I have to display many expressions in quick succession.
A related problem is described in this question: width:100% in CSS not rendering well in Android 4.4. The asker was able to solve his problem by removing the display: table; from html, but that doesn't work in my case.
So is there a way to either:
(a) force the new (Chromium-based) webview to render content while it is not visible, or
(b) display the content at the center from the beginning (without first displaying it in the top left corner).
It is not true that the KK WebView applies CSS only when visible on screen:
the WebView will not size itself if it has visibility set to GONE because the Android framework will call layout-related methods on it (like layout and onSizeChanged). This might be what you're seeing. Try setting the visibility to INVISIBLE instead.
WebViewClient.onPageFinished is not a reliable trigger for showing your WebView. What the callback really means is that the resource for the main frame had been loaded from the network. Unfortunately there never was a reliable callback that would tell you 'your content is ready to be displayed' - what you're describing probably happened to work because of particular timing. The most reliable way to not show unfinished content would be to do so in the HTML/CSS.
you might be using WebView.loadDataWithBaseUrl to load your contents into a new/blank WebView - this API is has an effect similar to re-writing the page's content (rather than issuing a 'real' navigation) and can result in weird layout. If possible use loadData or loadUrl. If neither of those are feasible try calling loadUrl("data:text/html,<body style=\"margin: 0px;\"/>"); before loading the real content (wait at least till you get an WebViewClient.onPageStarted callback for that bootstrap URL).
you might be setting height to WRAP_CONTENTS. This is very unlikely to cause the issues you're describing, but it would be good to rule out. Try setting a width of MATCH_PARENT and a height with a fixed number of pixels.
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.