I'm converting an old Stocks App from JQM to Polymer v.1 and i like to know if there is an easy way to have a dialog open at full screen. I checked the docs, maybe i missed something as i can see any ref to a full screen dialog.
The reason is when i click the plus button on the header to search and add a stock i get the dialog open ok
However when i search then the list populates but the dialog does not adjust on the page to fit/position accordingly
I have a workaround where i can append the list with blank paper items prior to opening the dialog
for (i = 0; i < 20; i++) {
$("#stockslist").append('<paper-item></paper-item>');
}
But i would prefer if there is a class or correct css i could add to have the dialog open at full screen with no padding or margin
Thanks
I did not test this, but you should be able to set the position and size on the dialog element. I have done something similar on a project I am working on.
paper-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
}
Related
I have integrated Google One Tap into my website. The login process works well on desktop, but on mobile, there is a horizontal scroll after logging in. It's also important to note that the direction of the website is right-to-left.
Following a user's sign-in, Google adds an empty <div> with the ID "g_a11y_announcement" at the end of the <body>:
It has the following CSS attributes:
#g_a11y_announcement {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
I get a blank screen right after signing in because of a 10,000 pixel overflow:
Unfortunately, I can't share a link to my website, but taking this element out of the DOM removes the scrollbar.
There's no documentation on this <div> or how to tell Google One Tap that the page is right-to-left. The only solution I can think of is to override the CSS, but I don't want my application to be blocked by Google.
#g_a11y_announcement {
display: none;
}
What is the purpose of this <div>? Is there another solution that I am missing?
I have same problem like you, I resolved for first moment this problem on next way:
after logout I redirected on login page by window.location, I know thats not right answer for this problem but that will resolve for first, problem is because in this solution app will refresh
Rather than hiding the div completely, I moved it to the right when the page direction is right-to-left. The solution below uses the SASS parent selector to check the direction.
#g_a11y_announcement {
[dir="rtl"] & {
left: auto;
right: -10000px;
}
}
The only downside to this solution is that it could break if Google changes the One Tap implementation.
Is it possible to insert a web page into a html file using iframe but showing the this "inserted page" at all browser ?
I need a solution to insert a html with a expansive way.
Your question is a little unclear but I will try my best to answer.
if you want the entire page to be taken up with this <iframe>, you will have two options:
Use jquery's $().load function and "load" your other website
$(function(){
$("body").load("http://yourWebPageHere");
});
Use plain <iframe> tags and use the css top: 0; bottom: 0; left: 0; right: 0; to make it extent to the edges. Note, do not use width: 100%; because that will leave a margin around the edges of the page.
I am working on a website.
Now what I want is to open a small screen with text and images,which pops up when a link is clicked.
I don't want to open small sized webpage..
What I want is similar to this in chrome.. "chrome://settings/startup"
please if someone can tell me what this feature is called and how it is implemented It will be helpful.
It's called a modal window. Not a real pop up.
Create a div with id
<div id="modal">
// your content with images
</div>
CSS
#modal {
position: absolute;
z-index: 99;
top: 25%;
width: 400px;
height: 300px;
margin: auto;
display: none;
}
Now in javascript:
On click of the link, show the modal window
$("#buttonId").click(function() {
$("#modal").show();
})
There already many plugins which does this:
Jquery UI
Bootstrap
But, if you have Chrome or a modern browser, use the <dialog open> tag (like a div) and use id's to edit the dialog via JS, such as:
window.<id>.close(); // closes dialog/hides it
window.<id>.show();
window.<id>.showModal(); // instead of showing it regularly, it puts it to the middle of the screen and greys the background like an alert. (you can edit the background effect with CSS)
If you want to use pure html, probably you can use window object. It has several types of popup window method, like window.alert(), window.comfirm(), etc.
If you want to use with javascript and css, then there are many ways to implement it. Here is a simple example I found:
[1]http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
I've been trying to properly place an element into my page so that it doesn't obstruct the background and so that it aligns all the way to right. I've tried to recreate the scenario on this jsfiddle, but I couldn't recreate it exactly.
There is a lot of junk included, but to create the layout of the actual page, I had to included it. My problem is with .login in the style and how it is interacting with the other elements. I've tried screwing with position, but I haven't been able to achieve my desired result.
Here is a screenshot of what it looks like with the problem:
This is what I would like:
Thanks for any help!
Try this
.login {
position: absolute;
top: 0; // or what you need
right: 0;
z-index: 1; // i don't know if you need upper value for that
}
I have had a google +1 button on my site for more then a year and it all worked fine.
In the last couple of days this button started to create a horizontal scroll bar on my site.
I know that beacase when I remove the button the scroll bar disappears.
Here is my site: www.kitchen-guide.co.il
Any suggestions what should I do?
Thanks!
borrowing from superware's answer, was having the same problem... however, this worked for me:
iframe[id^="oauth2relay"] { position: fixed !important; }
Google's +1 button is adding the following iframe to the end of the page body:
<iframe name="oauth2relayXXXXXXXXX" id="oauth2relayXXXXXXXXX" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=http%3A%2F%2Fwww.example.com#rpctoken=XXXXXXXXX&forcesecure=1" style="width: 1px; height: 1px; position: absolute; left: -100px;"></iframe>
One workaround (to this Google bug) can be to include the following rule in your CSS:
iframe[id^="oauth2relay"] { left: auto !important; right: -100px !important; }
If your website is all RTL then it should work fine, but if it's also LTR (multilingual) you will have to somehow target that role on RTL pages only. Check resizenow.com.
The iframe is no longer used to render the information bubble.
therefor, the previously suggested solution will not work anymore.
To fix the issue define the data-onendinteraction callback attribute.
<div class="g-plusone" data-onendinteraction="gplusoneinteraction"></div>
Then, implement the interaction callback function:
window.gplusoneinteraction = function(params) {
$('iframe[id^="oauth2relay"]').next('div').css({left: 0, right: '-10000px'});
}