First of all, I'm swiss, so forgive me if I mistake; My english is not so rich.
In tiapp.xml file I can see this directive <chrome scrollbars="true">true</chrome>.
It means that tideSDK uses Google Chrome? Or what else?
In other words: there is the possibility of missing functionalities depending the final user's configurations(Google Chrome not installed)?
Excuse me for the stupid question but I did not understand.
Chrome means the look - the outer decoration of the window. Another word might be "skin".
Enabling/disabling tells the framework to add the OSes native window decoration to a window - scaling borders on each side, a title bar with the window name, as well as min/max/close buttons - all this is part of the window chrome.
If you want to create 100% custom looking windows, you have to disable the window chrome.
Heads up! Scaling and moving of the window is automatically handled by the window chrome. If you disable it, you have to handle that functionality by yourself.
This is in no way related to Google Chrome :)
Related
This is a really weird bug that has already consumed half of my day.
I am creating a chrome extension and when developing the extension locally it looks fine (like I want it to look).
However, once I load the extension to chrome to test performance the UI looks a lot smaller.
I made sure both windows are at 100% size.
What is weird is that actual values change. Font that should be 16px in development becomes 12px in "production".
I have attached 2 screenshots:
DEVELOPMENT (How it is meant to look):
PRODUCTION (How Chrome renders it, once the extension is uploaded):
There you can clearly see the changes in font size and UI. Is this a known Chrome bug or something?
Any help or hint is appreciated since I feel kind of stuck!
Thanks!
maybe the answer of this thread could help you:
LINK
Seeing the images you attached, I can only assume that an ancestor tag (it could be the button or an even more ancestor element) uses a font size that conflicts with your "font-light" class declared 16px.
If by "testing locally" you mean opening the html page with chrome outside of a loaded unpackaged extension, then accept my advice to review your method.
The same html + css combo loaded in Firefox (almost certainly) would give an even different result.
It is also possible that the issue\solution lies somewhere else, but the concepts just outlined need to be taken into consideration.
I have a website which looks good if viewed the way I designed it. Every time I visit it from Chrome on Android, I am given a prompt along the bottom of the screen to "Show Simplified View". If I click that prompt to actually see it in simplified view, the site will only display 1 news item (there are supposed to be 25 on a page), it removes all controls (log in, add news item, comments), and scrolling doesn't work anymore. There are multiple other problems as well (headlines/images/article excerpts are not matched together, color scheme is missing, etc.) This happens only on Google Chrome, no other browser I've tested does this.
I don't see the prompt to switch to simplified view on other sites. My preference would be to place a tag on my site to never show this prompt. I have googled around for that, but I have only found articles about how to turn the feature on from Chrome, nothing about how to disable the feature from the server side.
My second thought might be to work with this simplified view and get it functional for people who want to use it. However, I have read that it also blocks all advertising and my site is supported solely by ads, so this is a distant second if I absolutely can't prevent the prompt from appearing.
TO SUM UP:
How can I prevent the "Show simplified view" prompt from appearing or
Failing that, how do I set up my site to work with simplified view?
Replace P tags with div in your page. this mode is also known as Reader mode. Probably this answer might help you.
The answer I found for this was to change the font size based on the media width, and once the font size was big enough to be readable on the mobile device I was using, it stopped suggesting the simplified view. The exact code used was:
#media (max-width: 540px) {
body {
font-size:18px !important;
}
}
Simple enough.
Also check your viewport settings for mobile devices. I received this popup when I changed the initial scale of the viewport to 0.6.
Basically Google recognised that the font size is too small. Looks good to me but probably not for visitors without perfect eyesight.
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
In this case, changing initial-scale=1 will fix this
A much better solution I ended up with
p { display: table; }
Just change the paragraphs to any of the generic blocks in my case I made it a table.
Show Simplified Views prompts when there is more text, Chrome prompts if it thinks it is a paragraph website where user is to read (by detecting texts (more than 700 approx)
If you truncate or remove texts, and make it less. Chrome won't prompt.
G'day mate. There's a permanent solution. Go into chrome://flags and search 'reader mode' and disable both flags which has 'reader mode' on it's name. And then, it's done, you'll never be annoyed by that pop-up again(unless you will uninstall and reinstall that chrome browser and then. ........ .... you'll have to do it again).
Thanks mate,bye.
I usually have three chrome windows open. To easily distinguish my work chrome from the personal chrome window, I would like to set a theme to one window, and another theme to other windows.
I figure out how to change the theme globally, wondering whether its possible to it per window.
Use different profiles. You can do this in chrome by clicking the Proflile icon in the top-right of any window. It'll ask you to log in with your Google account but you're able to make a local account with any name.
I use one for personal (personal google account), one for work (work google account), and a third with no google account for risky or other website browsing (which has more aggressive blocking rules)
I do have in mind 2 options, since I really want to easily identify them.
You can add name to your window, not so noticeable since only shows on hover on mac.
You can also group all the tabs in that window, to give it a bit of a different color
which you can see here. blue and red. Bit noticeable.
for windows users, can you try this options, it might be better there.
I did some research into this issue, and it seems the only way to do this is to open different browsers e.g - firefox for presonal stuff, chrome for work etc...
will be happy to see a better solotion though...
For several times I have encountered a strange behavior of our web-pages: if I just open the page it looks in one way, and if I view some element of that page with the developers tools provided by my browser - the appearance of the element changes. It really looks like some refresh event is thrown if I click on some div and look at it in development tools.
Does anyone know what happening?
For example, in my current situation I have some div, with semi-transparent background which should move after some event occurs. It moves in all the browsers except for opera. In Opera the is not shown at all. But in case I check that div with Opera Development Tools the div becomes visible! When I switch to standart mode - it becomes hidden again.
What happens when I track some div's data with development tools?
This is common behavior of all visual development editors and debuggers. In order to allow editing/debugging of the items, they overwrite the visibility properties of the components to TRUE.
Returning in normal mode, of course will set all properties to its real value.
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).