CMS Content iFrame sizing and alignment

Community Alums
Not applicable

I have a content page which loads an iframe containing a record producer form. By default, the form width is set to 100% width:

 

 

Aside from setting the 'Sizing' (height, width) in the iframe form, how can I modify the parameters of the iframe to change it's alignment, or apply a % width as opposed to a 'px' value? I basically just want to set the iframe to 85% width, auto height, and centre it on the page.

 

Tim

6 REPLIES 6

ChrisBurks
Mega Sage

One thing you can try is use the id of your iframe and set the CSS width style with the percentage. So if you look at the iframe form you set up there should be a field called "iframe name". That is the iframe id.



iframe_frame_name.png



find_iframe_id.png





Before setting the width:


before.png



After setting the width with a percentage using the iframe id:


after.png




It's not the best example but it should give you one idea of what you can do.


I'm interested in doing this, but not sure where to actually make the adjustments to width or alignment... anyone care to explain that to me??


Vlad,



For the example I had given in this post you would simply be applying some CSS based on the id of the element. In this case the iframe. If you already have that then the adjustment would be in the stylesheets of the Theme of the site you're working with.



For instance for the default site (Employee Self-Service) it uses the Gray theme by default. To find the stylesheets for the Gray theme click on the module labeled Themes under the Content Management application in the left side nav. This will list any existing themes. Click on the Gray theme. This will list existing stylesheets for that theme.



From here I would create a new stylesheet and name it something like Gray - Custom Styles and make sure to give it bigger number in the order so that it is last in the order. Again going with my previous example I used "myIframe" as the id. To change the width of my iframe element I would put something like this in that new stylesheet:



iframe#myIframe {


          width: 75%;


}



Keep in mind this is just one way of doing it. Everything here is just using baseline functionality of ServiceNow's CMS. Depending upon how you built your site there are a few different techniques that could be used.



I hoped that helps.


Hi Chris,



Thank you for taking the time to better explain this to me. I will be tinkering with it during my day today as I'm trying to make our Service Catalog available via IFrame in a new ESS site that we're developing.



Couple follow up questions that came to mind:



1) Is it possible to also add alignment code to the css?


so if   iframe#myIframe { width: 75%;}   will change the width of the iframe, what could be added to make the frame stick in the center of the page?




2) Is there any way to stylize the iframe? I have noticed another post titled "iframes in CMS" where there is a sample of code to still embed the catalog within an ESS page without using Iframes. I imagine this would allow for the catalog to take on the formatting and style of the css as opposed to having the appearance of the oob catalog. Would this be a correct assertion?