I am trying to use the Sign In with Google button from the Google Identity Service. Each time I render one of the Sign In with Google buttons the font flickers.
The flickering seems to coincide with style changes of text within the google button. It turns out that the google button has 2 spans that hold identical text for the button label. One of these spans is set to display: none. When toggled to be visible, one can see that the flicker seems to be caused by the switching between these two spans for the label. Google Button on DOM.
The Google default font is Roboto, but after the flicker, the font of the span rendered is:
font-family: Gotham,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;
It looks like the hidden button-label span does have the Roboto font applied though. Could this have something to do with the fonts?
Is there any known way to resolve this flicker?
I have attempted using useMemo in order to resolve this but, so far I have not had any success.
Related
I'm working on a xamarin forms app, using the searchbar tag to create a searchbar. For some reason, once I hit search and there is text in the searchbar, the whole screen gets a grayish tint... i have no clue why this is happening and did not find anything on the internet...
Before Search
After Search
Please halp (•_•)
if you are using an external keyboard or a mirroring software (Vysor) the grayish ton appears after hiting enter.
The same behvior can happen with an Entry. Try using mouse to confirm search.
I am working with IE11. After loading my website elements like checkbox, radio button, drop down arrow get automatically hidden then after hover on them they get visible then after click anywhere in page they again get hide. All this element are present and style are applied tested with developer tool but still they was giving problem. Then after check "use software rendering instead of gpu rendering" option from settings->Internet option->Advanced->"use software rendering instead of gpu rendering" everything got ok. Now my website element not getting hide all style applied perfectly. But I doesn't understand why this happen? How this setting fixed issues. Please any idea help!
I am working on a Javascript Based site, which uses the Dojo Framework.
I am using a DataPicker. I wish to change the background color of the datePicker, and hence I wish to look at where in the CSS is the color being set, so that I can override it in my CSS.
Usually I use FireBug and 'Inspect Element in FireBug' to view the HTML and CSS together. (or even Google Chrome's developer tools)
However this datepicker is a dynamically created component, and If I right click, or move my mouse into the Firebug window, the date picker is shutdown/destroyed. (You can check out the sample on the linked page itself)
Is there a way to inspect the CSS on these kinds of dynamic elements, using Firebug, or something else?
The best approach I've found for the dijit popup widgets is (using chrome)
Open the popup (in this case the date picker)
Right click on the element
Select "Inspect Element" from context menu
Chrome will open and transfer focus to the developer tools without blurring the focus of the page, keeping the popup open, allowing you to modify attributes and css rules and getting instant feedback.
I'm converting a Sharepoint 2007 installation to Sharepoint 2010. In 2010 each Web Part has an arrow in right side of the menu bar that only displays on mouse hover. How can I make that arrow always display? I've tried adding this to my custom CSS:
.ms-WPHeaderMenuImg{
visibility:visible !important;
}
The visibility set by corev4.css is hidden, but when I change it to visible in my CSS I still only see the image on mouse hover. Is there some JavaScript that is controlling this action? If so, where is it and can I override it? If not, how is this arrow showing and hiding?
You should check your priority of CSS imports and make sure your custom CSS is actually being applied because the code you have is correct. I was able to verify that on a standard page, adding a webpart did not show the drop-down arrow. When I then added in your code (and actually I didn't need the !important) then the arrows were shown by default. There was no JavaScript getting in the way, it was all controlled by CSS. So the problem may be somewhere else in your code.
One thing to be aware of is that there are two ways to display webparts: with the checkbox to the right of the arrow and without. That means that the arrows will not line up vertically on the page if you have them visible by default. This may be why Microsoft chose to hide them (although it also looks cleaner in the 2010 way).
I am making a webpage that has different areas that can be clicked on to change the contents.
I want to set it up so that when you click on an area, an openWYSIWYG editor appears in the middle of the screen with the rest of the page greyed out.
I have achieved this except for the positioning of the editor. When you click on a section I have a div with 50% opacity cover the page and a textarea appear in the middle. But when I try to attach the editor to the textarea, it loses it's position and falls behind the div not in front of it like the textarea is.
Can anyone suggest a way of centring the openWYSIWYG editor?
You're looking for Modal positioning. Here's one solution:
http://jqueryui.com/demos/dialog/#modal-form
Basically, apply the Jquery Dialog to the div that holds your WYSIWYG. Don't forget a submit button.
Just a quick heads up--I went through quite a bit of headache dealing with WYSIWYG editors for client-facing sites a few months back. It seems that clicking the "paste from WORD" button was a very difficult task to figure out. Word-pasted code can wreak havoc on websites, overrunning text fields in the database. I gave it a try on their demo (which also doesn't support webkit based browsers) and the result wasn't pretty. The only two options I found to solve this were to sanitize code on the back end, or to use CKEditor. I chose the latter because it was so easy. Take a look at CK, it's a great piece of free code.