I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
Related
I am trying to use one of the Material Design Lite templates inside my Vue.js application.
What happens is, when I am routed(using this.$router.push('/templateX') to the next page, the component is not fully rendered(I can see only the header).
What is really interesting, when I take a look at the source section inside the browser console, I can see that the template is loaded but not fully rendered.
Once I reload the page, then the whole template is rendered and everything is shown as expected.
I think the problem is in the component life cycle but I am not sure what shall I do exactly. Any thoughts?
I am opening an NgbModal passing a TemplateRef to create the dialog body, and passing in a custom class via the windowClass property of the NgbModalOptions object that I pass to the open() method. I define the class in a referenced styleUrl in the component and am serving the modal via an injectable service in the component. The modal is loading fine, and I can see the class name when I inspect the DOM, but the class appears to have no bearing on the modal. I would like to use it to customize the size of the modal (css is defined to affect the child div where the size is set), but I have also played with properties that I can see in the Styles tab of the Chrome dev tools, but cannot see it affecting anything. When I inspect in Firefox dev tools, I can find the CSS as an inline style sheet and it has a reference to the ngContent identifier assigned by Angular, so I am assuming that is does not affect the entire document, nor those parts added by ng-bootstrap that constitute the modal wrapper. Has anyone been able to make this work successfully? I am at my wit's end. I would even be happy if I could get an ElementRef of the modal-header dive, but since I am using a template (which is not fully loaded in the DOM at init time) I have not been able to. One of my requirements is that we do all DOM manipulation via Angular to maintain platform independence in the project ... so no jQuery. Any thoughts? And thanks in advance!!
I use windowClass and size attributes of NgbModalOptions to customize the modal. Sample code follows:
this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});
Whereas
.modal-adaptive-s1 .modal-lg {width: 400px !important; max-width: 400px;}
I'm trying to understand the usage and limitations of server side rendering with vuejs when using aspnet core.
I used this starter kit for aspnet core and vuejs to setup a simple vue site, which is running based on the code here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/master
I then modified the project to update the aspnet-prerendering and added vue-server-renderer, compiling a hodgepodge of sources to cobble together this update: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr
If I run this project, the site appears to load fine, and if I turn off the javascript in the browser, I can see that it does appear that the server-side rendering executed and populated the html result:
however, because JavaScript is disabled, the content isn't moved into the dom as it looks like it is trying to...
My understanding of server-side rendering is that it would populate the html entirely and serve a completed page to the user, so that even if JS was disabled, they'd at least be able to see the page (specifically for SEO purposes). Am I incorrect?
Now I believe modern search engines will execute simple scripts like this to get the content, but I still don't want a blank page rendered if js is disabled...
Is this a limitation of server-side rendering, or perhaps specifically ssr with vue and/or aspnet core?
or am I just missing a step somewhere?
Edit: more information
I looked at the source code for what I believe is the method that prerenders the section here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs
The line
output.Content.SetHtmlContent(result.Html);
has a null value for result.Html. However, when I manually edit this value to put a test value, it also doesn't render to the output html, and the app div tag is still empty...
If I'm doing something wrong to populate the result.Html value with the expected output, that's one thing, and I would appreciate some help in doing that, especially since the output html appears to be found, since it's in the script that immediately follows...
However, even if I were to populate it, it appears it's being skipped, as evidenced by me manually changing the value. is this a bug in the code or am I doing somethigng wrong, or perhaps both?
As you correctly noticed, for your project, result.Html inside the tag helper is null. So that line cannot be the location where the output is being generated. Since the HTML output from your prerendering script also does not include a script tag, it is clear that something has to generate that. The only other line that could possible do this is the following from the PrerenderTagHelper:
output.PostElement.SetHtmlContent($"<script>{globalsScript}</script>");
That would fit the observed output, so we should figure out where the globalsScript comes from.
If you look at the PrerenderTagHelper implementation, you can see that it will call Prerenderer.RenderToString which returns a RenderToStringResult. This result object is deserialized from JSON after calling your Node script.
So there are two properties of interest here: Html, and Globals. The former is responsible for containing the HTML output that finally gets rendered inside the tag helper. The latter is a JSON object containing additional global variables that should be set for the client side. These are what will be rendered inside that script tag.
If you look at the rendered HTML from your project, you can see that there are two globals: window.html and window.__INITIAL_STATE__. So these two are set somewhere in your code, although html shouldn’t be a global.
The culprit is the renderOnServer.js file:
vue_renderer.renderToString(context, (err, _html) => {
if (err) { reject(err.message) }
resolve({
globals: {
html: _html,
__INITIAL_STATE__: context.state
}
})
})
As you can see, this will resolve the result containing just a globals object with both html and __INITIAL_STATE__ properties. That’s what gets rendered inside of the script tag.
But what you want to do instead is have html not as part of globals but on the layer above, so that it gets deserialized into the RenderToStringResult.Html property:
resolve({
html: _html,
globals: {
__INITIAL_STATE__: context.state
}
})
If you do it like that, your project will properly perform server-side rendering, without requiring JavaScript for the initial view.
I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.