I just started developing an extension earlier today and when I checked how it would look within the browser I noticed these white spaces at the top and bottom. I noticed similar but smaller spaces in other chrome extensions I have. I can't seem to find anything online about it. Does anyone know what's going on and how I can fix it?
Here's a picture for reference:
image that shows a picture of extension
The white space at the right side isn't part of the problem it was just the way I captured the picture.
--Question was answered by wOxxOm in comments below.
Related
I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!
I don't want to hide time, but want to use full screen
In the storyboard on the interface controller settings I set the checkbox "Full Screen" and "Fixed to screen edges" to ON.
In the storyboard I can see the full screen mode is working and the WKInterfaceGroup is scaled to the entire display.
But unfortunately on the watch device/simulator it does not work.
The group has alignment center/center OR center/top and width and height are set to "Relative to Container"
How can I really use the full screen mode?.
I just have to add a label equal to Time in top black space. I want to show some text here. I have seen this in some other apps, They are using this space. Even in Apple design guide lines docs, they use this space. I am adding these reference screenshots also.
In above pictures, you can see they used this top space for titles. I also want to add a label to show some text equal to time.
Any help would be greatly appreciated.
This is a really weird bug. After digging around I've found a way to fill the whole screen. It's not pretty but I'm consistently getting full screen if i'm adding a sprite kit scene into a "main group". Again; it's not an elegant fix but it works and isn't really that resource intensive. Hope this works for you too!
I'm new to after effects.When I enter a text it is getting pixelated and even cannot see and understand. Below I'm attaching a picture of my problem. Thanks.
Try change the font size, from 12 to say 80 (in the character panel, located on the right in your screenshot).
You also seem to have chosen a very narrow font, it doesnt help.
I should add: this is definitely not the kind of questions to be asked here. You should go to an After Effects user forum, such as https://forums.adobe.com/community/aftereffects_general_discussion?view=discussions&start=0&numResults=30
OK, I had the same problem like yours and what I did was I scaled the text way up to 1240x1240 and it resolved my problem. Now my text is very clear!
I use AddThis on most pages on my website for sharing on social networks. Pages that have the AddThis code are very very wide, because of the AddThis code, as seen in the horizontal scroll bar (Please see example below). Removing the code fixes everything and the page width is back to normal. I can't seem to put my finger on the why this happens with the AddThis code. Please help!
Please click on link for example:
http://roshtof.co.il/events.php
This is due to right to left language
This is what make the problem in your code:
-10000px!important
After I remove it the scroll is fix.
My website has the typical container that is centered in the middle (very similar to Digg's V4 website actually). The problem I'm having is that when resizing the window smaller than the container's width, anything with a background in the container appears to be cut off according to the window's width. Digg's website actually has the same problem as mine too. To illustrate, I've posted screenshots describing the issue. The first screenshot has the window resized smaller than Digg's container width (notice the horizontal scrollbar at the bottom).
Now the second screenshot shows what happens when we scroll to the right. Notice that anything within the container with a background has been cut off!
To reproduce this, just go to Digg's website and resize the browser window to around 600px and scroll to the right. Is this a fairly common problem with a fairly common solution? I tested this using Firefox 3.
Set min-width on the problem div.
Unless someone points out the W3C spec justifying this behavior, I believe this is a common browser bug.