I have an element that loads in an iframe that is contained in another element, something like this:
<polymer-element>
<iframe>
<html>
<body>
<polymer-element>
</polymer-element>
</body>
</html>
</iframe>
<polymer-element>
I need to access from the element inside to the outside of the iframe, I was trying with this.parentNode, but only reach the html tag. I tried also with core-signals but neither worked.
Related
I have
<div class="ap-content" id="office-addon">
<div class="ap-iframe-container iframe-init" id="office-addon__5e83ed1">
<iframe id="office-addon__5e83ed1">
<!-- As it appears in the dev console: -->
#document
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="addon"></div>
</body>
</html>
</iframe>
<div>
<div>
I want to access it with nightwatch like so:
browser
.waitForElementPresent('#office-addon', 20000);
.frame('#office-addon iframe')
.waitForElementPresent('#addon', 1000)
.end();
But it times out waiting for #addon, though #addon is in the browser. How do I have to write the frame() parameters? The iframe id changes with every page build.
The solution was like following:
browser.getAttribute('#office-addon iframe', 'id', id => {
browser
.frame(id.value)
...
});
It didn't work directly.
If you want to select it by id, you probably ought to try a starts with selector like:
.frame("iframe[id^='office-addon']")
If it's always the nth iframe you can index in
// select the first iframe
.frame(0)
// go back to the original html content
.frame()
Iframes are elements to display another page, and it will not render any html written inside of it unless your browser doesn't support iframes. So that div with the id #addon is never being rendered in the first place.
Can I put a <style> tag inside a template for an Aurelia view? I'm having a specific issue where if I have a <style> tag in the template, my aurelia-dialog is not aligned correctly (it's floated to the top of the screen instead of centered in the middle). As soon as I remove the <style> tag, everything is correctly placed. What is the proper way to write .css classes for a view / template?
Example: For my dialog component (similar to a bootstrap modal), I have a dialog.html and a dialog.js
Inside dialog.html, the code looks something like this:
<template>
<style media="screen">
.selectedBorder {
border: 1px solid black;
}
</style>
<ai-dialog>
<ai-dialog-header>
Header
</ai-dialog-header>
<ai-dialog-body>
Sample body information
</ai-dialog-body>
<ai-dialog-footer>
Footer info
</ai-dialog-footer>
</ai-dialog>
</template>
Edit: I figured it out. You can have <style> tags inside templates. My problem was that i had one template (main screen area) calling another template (popup dialog). I just had to move the <style> from the dialog.html into the main view's html and everything worked correctly.
This might not be the popular consensus, but what I have been doing it making all of my customer elements containerless, eliminating the markup bloat and then namespacing the template content with an id attribute. For Example:
someView.html:
<body>
<avatar-pic containerless></avatar-pic>
</body>
avatar-pic.html
<template>
<section class="avatar-pic">
....
</section>
</template>
avatar-pic.css
.avatar-pic {
...styles here
}
Hi I have a div question,
on my home page I have a menu its in a div. The body has another div. Can I put or somehow call a specific div content from another page into the div of the homepage body when I call for it from my menu. or how can I put the other page inside the body div with out using Iframes. For example:
<html>
<body>
<div>content from the another_page.html div.</div>
or
<div>another_page.html inside here</div>
</body>
Can this be done? Thank you in advance.
You can use jQuery for solving this.
Please refer to this for loading div from another page inside div:
Load content of a div on another page
And for loading another page inside div:
loading html page inside div
You have a number of ways to do this, as commented already, ajax is probably what is used in most cases. However it can also be done using PHP, jQuery, and an HTML object.
Link to similar question: here
You could try this and style it with css
<body>
<iframe src="page1.html">
</iframe>
<iframe src="page2.html">
</iframe>
</body>
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I'm working on a project and having some trouble with IE7.
I've got that has an iframe that takes up the whole page and loads another page. Cut down, it looks something like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<body scroll="no" style="margin: 0;">
<iframe id="corpdir" height="100%" width="100%" frameborder="0" src="http://fullpath.to/corporate/directory" name="parent_frame">
</body>
</html>
Going to http://fullpath.to/corporate/directory works great in IE7, and there are no problems with rendering at all. But when it is loaded in the iframe like above, there are elements which get pushed to the left. All of these elements have a "margin-left" defined, but it seems like it's getting ignored. Not all elements with margin-left are being pushed over, just a few. I can't see anything in common about them that I could imagine would do this.
(Please don't ask why I was pretty much forced to load our webapp in a full screen iframe. Just accept that's it's pretty enterprisey and move on. Thanks.)
Fixed it like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<frameset>
<frame src="http://fullpath.to/corporate/directory">
</frameset>
</html>
Didn't even realize there was no reason to be using an iframe there.