Iframe & CSS

I have a form in notes that opens when I launch the db in a browser. I am using CSS to move things around on my form and make it look pretty. I have an iframe that loads a notes form that has an embedded view in it. The form is a ??ViewTemplate. Below if iframe code.

    < ID=switchview height=200 width=750 scrolling="yes" 

src=“//People\By Name?openview”>

</>

The view people by name doesn’t really open the form ??ViewTemplate for People\By Name form opens. I have the embedded view set to ‘Display Using HTML’.

The problem is when I open the main db page, the view ( really form with embedded view ) in the iframe displays, but does not use my CSS. It looks like an ugly notes view on the web.

When I view this same form ( the ??ViewTemplate one with the embedded view) by itself just as a form in a browser, it uses the CSS.

Both of my css references are in the HTML headers in the main form and the ??ViewTemplate form.

How can I get the iframe form to use my CSS for the embedded view?

My css resides in the CSS resource section provided by domino.

ANY help or direction is appreciated. I am new to CSS and dom web development.

Thanks in advance!!!

Subject: iframe & CSS

I have noticed that when you write a CSS file as a page and save it with the CSS file extension and use the HTML HEAD with code to reference it, that it does not get picked up and “noticed” unless you name the page with an alias also.

So your page name needs to be RedView.css | Redview.css and once it is aliased the system suddenly finds it. (also using iframes and view templates).

You can use the embedded methods also but I prefer to use this method so I can changed my CSS code right on the page as needed without having to launch the css file elsewhere, change it and reupload it.

Subject: iframe & CSS

I am assuming your iframe html reference was not included here and that the iframe content shows without any problems.

So, the issue is the CSS reference. If all you have in the iframe is the view which should be “pretty” using the CSS, then the $$ViewTemplate is the only place you’ll need to reference the CSS file. I would start basic by hard coding (as passthru html) the style into the $$ViewTemplate to see if that works. I would also check the source of your iframe to make sure it references the proper css. I would also check to make sure your reference is not relative. If you are using 6x, did you write html or use the Insert Resource method? If you used the Insert Resource method, try adding the css the “old” way by placing something like this in your HTML Head Content:

“<style type="text/css" media="all">@import "yourcssfilename.css?OpenCSSResource";”

Let us know what you find out.

Subject: RE: iframe & CSS

David, thank you!!!

I did the Resource → Insert Resource thing in my form ( the one with the embedded view) and it worked!! Yea!

I previously had the following in my HTML head on that same form …

“<link rel="stylesheet" type="text/css" href="core-styleEMP.css" />”

and the above wasn’t working. I simply did the Create —> Resource —> Insert Resource…

It put the little icon thing there and voila! It worked. Are there any drawbacks to using this little icon reference versus the other ways?

Thanks again!

  • jamie :wink:

Subject: RE: iframe & CSS

No, none at all – except that you can’t compute the value at run time (based on, say, a user profile document setting or a particular browser version or what have you). If you ever need to compute a link value, you can use:

“http://” + @GetHTTPHeader(“Host”) + “/” + @WebDbName + “/” + [filename goes here]

Subject: RE: iframe & CSS

Thank you!

Now, I have a new problem. I have put a field in my iframe name ‘ViewName’. I have the embedded view compute to a formula instead of view name. The formula is ViewName ( points to my field ). The default value of my field is my default view. The view comes up as it should ( in the embedded view in the form that is my viewtemplate ), but the issue is that the editable field named ‘ViewName’ is not editable on my form and I cannot access it via javascript. When I view source on the iframe it doesn’t even show the ViewName field. It just prints its default value as text. Normally, a notes field has the < input …> tags, but my field does not.

Does domino restrict fields in iframes? Any help appreciated.

What I am trying to do is have my javascript set the ‘ViewName’ field to a new view name and then my iframe will show new view in theory. I’d doing this so that I only have to build one view template and just set this field value each time that I want to see a different view. Any thoughts? Am I going down the wrong path?

Thks in advance,

jamie

Subject: RE: iframe & CSS

$$Templates can never be accessed in edit mode. That’s not a problem, though, since your JavaScript doesn’t no nothin’ from no modes – all it knows is HTML. Try this in passthru HTML on your form:

Even though ViewName is rendered as plain text, the HTML around it fools the browser into thinking it’s an editable hidden field.

Subject: RE: iframe & CSS

Could also select Generate HTML for All Fields on the 2nd tab of the form properties which should give html similar to what Stan has offered.

Also, if you have a generic $$ViewTemplate it will work for all views that do not have a specific $$ViewTemplate for YourViewName.

So you may not neet to do any computing if all you want is a generic template for your web views.

Glad the Insert Resource worked out for you. This new method makes life easier and allows the developer to worry about other things besides snytax for referencing css and js files.

HTH