Currently when I use the new API for the personalised sign in with google button, when the button is centered vertically in a flex container, when it is loading it flickers up and down.
Example code is shown below, just in html and css for simplicity, however building this in react - same thing happens.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css"
></link>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="./script.js"></script>
<div
id="g_id_onload"
data-client_id="920029725372-e913v434vc2hfbb6cfkrs7qhiuvuita6.apps.googleusercontent.com"
data-callback="handleCredentialResponse"
></div>
<div class="button-wrapper">
<div class="g_id_signin" data-type="standard"></div>
</div>
</body>
</html>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
#font-face {
font-family: "Google Sans";
src: url("https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwM.ttf")
format("truetype");
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Any help would be greatly appreciated! Sorta wish google would allow for custom buttons or at least an API so that issues like this could be avoided instead of forcing devs to use an <iframe/>, also the new API isn't awesomely documented (I'm assuming because of how new it is but hopefully this will get better with time.
For some reason, Google created two div's to house identical buttons. The second, with the iframe, replaces the first when the proper font loads. The order in which the css is modified by Google means that no matter how you try to correct the flash with pure css, it will still show up in some way. I went so far as to overlay the div's using position:absolute but the margin gets modified on the first div so it still shifts up before vanishing.
The only thing I found to work is hide one of the div's permanently. Either way works, the difference is the button font. This one lets the iframe only version load:
.g_id_signin > div > div:first-child{
display: none;
}
This one loads the initial div only, so the font is off, but it shows up faster and the auth flow still works:
.g_id_signin > div > div:last-child{
display: none;
}
You could probably catch and handle the flicker via javascript, but I'm not spending that much time on this. I'll use this css fix until Google updates their code.
The best solution I found is to wrap the Sign In with Google button in a div and make that div's height 44px i.e. the height of the button. That way as the button loads additional content, it won't move anything up and down.
As the old generic sign in with google button disappears and new sign in with name and email appears, that unloading and loading seems to cause the flicker.
.GoogleLoginButtonContainer {
height: 44px;
width: auto;
}
Related
I am trying to build a really simple CSS Grid Layout: header/content/footer. I had it working, then I tried opening it up in device emulator and I could not understand the behavior at all. To make matters worse it also did not behave as expected on my phone, but it behaved differently than in the device emulator.
In the emulator the page loads as I expected: the Body formed a grid with a header, the main content overflowed on the x axis so the whole page had a horizontal scroll bar, and the footer was flush with the bottom of the page. When I removed the class that made the main content oversized it looked pretty nice! Then when I added it back in the html and body in the element inspector suddenly were a small portion of the screen and the footer was flush with that bottom, the whole page scrolled left and right, and there was a giant empty space at the bottom of the actual view.
The red box above shows the empty space. The blue box on the same screenshot shows where the element inspector claimed the html and body elements were. On my phone (iPhone 13 Pro, Safari), I get more or less the expected behavior, but the window chrome hides the footer, so I have to scroll and I can't make it go away. I have to assume that if I had a smaller physical device to test it on the behavior would be the same...To add another mystery: sometimes after I've had it open it will load straight into the weirdly resized mode.
I stripped it down to the simplest I could make it and then added a few buttons to demonstrate the behavior. The code is here, and it's up live here.
I know this is some sort of interaction between the <meta viewport> and what 100vh and 100vw means...but I really, really don't understand what's going on. I know how to get my code working mostly the way I want it. An acceptable answer will explain what I'm seeing in the emulator. To phrase it as a question: "What is going on in the emulator that causes this strange re-sizing?"
EDIT
It looks like the initial rendering depends on the previous state of the page. If you reload the demo above when the section is not oversized it renders as in the first screenshot. If you reload the demo when the screenshot is oversized it initially renders as in the final screenshot.
I think the issue is in the viewport meta. Try adding initial-scale=1 - this will set the initial zoom level of the page (device-width).
My guess is the zoom happens because changing overflow to anything but visible creates a new block formatting context - causing the initial state to be re-evaluated. At the point of re-evaluation, the content exceeds the viewport why the width is considered to be 960px (iOS default) - triggering the zoom to fit.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
I think I found the problem, but I'm not sure I can explain it properly since I'm not an expert or specialist. I actually spent more than an hour inspecting your code, trying different solutions, and reading some related research.
1- I noticed that you use rem unit to resize elements NOT font but when I research it, I found most if not all results relate rem with root element and font-size. so I was wondering if we can use rem to size element and kept searching about and found that it's possible, but I couldn't find enough details about this specific part.
Even on mdn web docs, it says "the rem unit means "The root element's font-size" (rem stands for "root em")."
2- Anyway, in your code, I changed 50rem to 80% and the problem disappeared in the emulator and everywhere.
I hope my effort helps.
function toggleContentOverflow() {
const isOn = document.body.classList.toggle("content-overflow");
contentOverflow.textContent = isOn ? "On" : "Off";
}
function toggleMainScroll() {
const isOn = document.body.classList.toggle("overflow-scroll");
overflowScroll.textContent = isOn ? "On" : "Off";
}
html, body {
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
font-size: 14px;
padding: 0;
margin: 0;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header, main, footer {
padding: 1rem 2rem;
}
main {
padding-block-start: 0;
padding-block-end: 0;
}
header, footer {
background-color: #ffe;
}
header {
border-bottom: 1px solid #eee;
}
footer {
border-top: 1px solid #eee;
}
section {
background-color: #ddd;
padding: 2rem;
margin: 2rem auto;
}
body.content-overflow section {
width: 80%;
}
body.overflow-scroll main {
overflow: auto;
}
<body class="content-overflow">
<header>
Header Content
</header>
<main>
<section>
<h1>Too Large Card</h1>
</section>
<aside style='margin-top: 1em'>
<button type="button" onclick="toggleContentOverflow(event)">"section { width: 80%; }" <span id="contentOverflow">On</span></button>
</aside>
<aside style='margin-top: 1em'>
<button type="button" onclick="toggleMainScroll(event)">"main { overflow: scroll }" <span id="overflowScroll">Off</span></button>
</aside>
<p>
To see this quirk:
</p>
<ol>
<li>Open this page in private mode (to avoid extensions inserting elements).</li>
<li>Open the developer tools</li>
<li>Turn on the device emulator</li>
<li>refresh the page</li>
<li>Click the 'section { width: var(--size-15); }' button.</li>
</ol>
</main>
<footer>
Footer Content
</footer>
</body>
Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
I am dealing with primeface framework sentinel theme in a JSF page. I understand most of the issue, but I lock in changing button height.
I have tried giving
style="height:100px" or style="line-height:100px" or styleClass="Fs25" to <p:button /> but button's colored area never changes.
I look default login.xhtml of sentinel theme and I see the button and copy the code, result is the same in my page again.
What is my problem guys. What is the point I miss over and over?
Here is live preview Login Page
Ok after I inspect the css I have found
.ui-button .ui-button-text {
display: block;
line-height: normal;
}
This is how I solved the issue
inside head tags
<style>
#bigbtn .ui-button-text{
line-height: 60px; <!-- Height of Button -->
font-size: 20px; <!-- Size of Button Text -->
}
</style>
In body
<div id="bigbtn">
<p:button value="Big Button" />
</div>
There could be better answer. I also want to hear them.
Thank you.
Firstly, I was unable to reproduce this issue on plunker, but my attempt is linked here: http://plnkr.co/edit/yFe07e
I have an ng-repeat which repeats A-Z and are displayed as buttons, for the user to click to filter their results.
The letters are arranged in a table to display horizontally, filling up all available width. It works perfectly for B-Z... but A does not show its animation effect. If I watch via an ng-click it does indeed register the click, the it does not animate the click like the rest of the letters.
I don't know why I'm unable to reproduce the issue on plunker, but hoping someone can point me in the right direction.
<ion-view view-title="Title">
<ion-header-bar class="header-bar stable-bg">
<img src="content/img/logo.png" class="logo">
<span class="royal">Title</span>
<div class="time royal">{{getTime()}}</div>
</ion-header-bar>
<ion-content class="energized-bg">
<div class="letter-repeater stable-bg">
<span ng-repeat="letter in letters" class="button button-outline button-royal">{{letter}}</span>
</div>
</ion-content>
</ion-view>
CSS in question:
.letter-repeater {
z-index: 2;
height: 15px;
width: 100%;
display: table;
table-layout: fixed;
}
.letter-repeater > span {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
1) Why is the first element in the ng-repeat not animating on click but the rest work perfectly?
Update
I have tried to isolate what's going on here by recreating on plnkr but have yet to be successful; I will try to explain the nesting of the view in question and my stack below.
The HTML near the top of this post is the root of home.html
index.html simply has <body ng-app="myApp"> <ion-nav-view></ion-nav-view> </body> with no css
The view is governed by Ionic->Angular UI-Router, as below
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'app/home/home.html',
controller: 'homeController'
}
}
})
As you can see, nothing terribly interesting. The only customizations on Ionic's SCSS are color variables. Further, I have poured through all elements in the browser to ensure there's no overlap, and where I've found any I pushed it behind with z-index.
I am using Ionic, AngularJS, Cordova, JQuery
The issue presents itself when viewing in browser or on device
Can someone help me I'm searching for css/html code example:
I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middle section.
same for the other buttons refered to div id='top', and div id='bottom'
Thanks in forward! I really couldnt find any solution on the internet.
Is there a way to keep my buttonlist on a fixed position so it stays on screen while
moving through sections?
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
For something really basic use this:
Go To Middle
Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.
There is a much easier way to get the smooth scroll effect without javascript.
In your CSS just target the entire html tag and give it scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
<html>
Click Here to Smoothly Scroll Down
<div id="down">
<h1>You are down!</h1>
</div>
</html
The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.
HTML
Top
Middle
Bottom
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Example http://jsfiddle.net/x4wDk/
Try this:
Scroll to top
If you want smooth scrolling:
html {
scroll-behavior: smooth;
}