In my Blazor application I'm trying to display swagger within the application instead of navigating to swagger. Here's the code I'm trying to use.
#page "/admin/swagger"
#*#attribute [Authorize(Roles = "Admin")]*#
#*#attribute [Authorize]*#
<iframe src="swagger" height="400px"></iframe>
It's rendering like this...
How do I get it to have a static height or at least fill the page?
Thanks!
You can use CSS isolation on your page to do the sizing.
AdminSwagger.razor
#page "/admin/swagger"
<iframe src="swagger"></iframe>
AdminSwagger.razor.css - file within the same folder that contains your component AdminSwagger.razor
iframe {
height: 100vh;
width: 100vw;
}
You will need to adjust the CSS to fit your application's UI.
Related
I am noticing that adobe echosign is setting default minimum height and width using pixels while generating the Iframe for Personal Embedded widgets. I checked the below link (& other REST api documentations) and can't find a property to tell echosign to render the widget in a scalable mode according to width/height dimension of the device as in mobile, tablets or PC.
Api Documentation->
https://secure.na1.echosign.com/public/docs/restapi/v5#!/widgets/createWidget
Adobe EchoSign default Iframe Render setting->
<iframe src="******" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>
How to tell echosign REST api to dynamically adjust it's Iframe size?
I tried finding a solution to this also, but the short of it is that it can't be done with their widgets. None of their internal settings or the API allow a way to modify the iframe styling.
What does work, however, is adding a little javascript and css to modify the iframe. Here's an example of javascript code you can use:
document.getElementsByTagName("iframe")[0].setAttribute("id", "echosignwidget");
document.getElementByID("echosignwidget").removeAttribute("style");
By adding an id and removing the inline style attributes you are now free to style the element however you please using CSS.
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
for my portfolio site, I would like to implement some CSS code that would allow me to control the variables for dynamically scaling images on my Blogger. http://www.bryan3d.com
This means that as you manipulate your window via resizing, the scaling of the images (hosted by imgur) would be resized on the fly.
A working example of this functionality can be seen here, though the user is using Squarespace: http://jasonlavoie.net/personal/#/deusudk-environmentart/
Is there something I can implement to have the same functionality through blogger?
Please see my answer : How do I make an html image responsive?
Add this in you'r css file :
img {
width: 100%;
height: auto;
}
this will affect all img elements. to be more specific, you can use a specific id like :
#headerhj img {
width: 100%;
height: auto;
}
see : http://www.w3schools.com/css/css_rwd_images.asp
I am using Redactor v10.0.9 to allow users to create some custom posts for my web app. These posts are rendered in an iframe in a modal, and I need images that are uploaded to have a max-width of 100%. I have tried to maintain an outside stylesheet that I append to the iFrame that contains
img {
max-width: 100% !important; } }
But that doesn't seem to be working at all. I would like to just add style="max-width: 100%" inline style to the img tag when it's inserted, but I can't seem to find where the image is inserted into the post after an image upload.
Any ideas on how to force these images in an iFrame to be max-width: 100%? Thanks
Edit 1:
I am using the imagemanager plugin to upload images to Redactor. Forgot to mention that.
Edit 2:
The content contained in the iFrame is dynamically created HTML, not content from another domain.
Figured out how to do this!
Instead of appending any sort of style to the img tag on insertion, when I render the custom posts I am retrieving all of the images in the iFrame in JavaScript, and then applying a CSS attr of "max-width: 100%" on each one.
I am using Spring security UI and every time I add
<r:require module="register"/>
<r:layoutResources/>
(this should add the style for spring security UI)
To my head of the auth file it moves my page from being nicely centered to top left
any Ideas?
I know its something to do with the reset.css file but each time i change it it also changes the login fields.
I don't like this way of centering a page but in the reset.css file in the plugin add this code to the bottom.
html {
margin: 0 auto;
width: 1024px;
}