when I am running my apps on emulator or virtual device, its working fine, but when i am running it on real device the screen not scrolling, I am using an Intel xdk bootstrap design. Please can someone tell me how I can solve this issue.
The issue that you are experiencing is present in Android devices with versions below 3.0 due to the interpretation of css properties by the WebView. This is an issue related to the styling created by the Intel XDK App Designer within the index_main.less.css file. This file is auto-generated and stored within the css folder in your project directory every time you make changes to layout with the Designer.
In order to resolve this issue, you will need to make changes to the following css class.
*index_main.less.css*
.......
/*.upage {*/ /*Comment out this line*/
.upage-outer { /*Add this line*/
overflow-x: hidden;
}
.......
You should now be able to scroll your app.
Note: The index_main.less.css file will be re-written every time UI changes are made to the layout.
Related
I am primarily a Java developer and I'm not 100% familiar with the technologies I'm working with here.
I have a React application written in TypeScript which gets run through a Parcel bundler prior to deployment. When I run the application for local testing on my dev machine, the spacing of checkboxes in the application looks great:
The problem is after I build the application and run it on production, the checkboxes are no longer properly aligned:
I have managed to track it down to a difference in the CSS between local:
and production:
If you notice, the production CSS has an extra margin-bottom: 0px in the top CSS file (.css-1h4ws66). This is my problem--it is overriding the margin-bottom: 10px in the .css-lidh19 file and thus ruining the spacing.
My problem is that I have no idea where the 0px bottom margin is coming from. It doesn't appear to be defined in any of the styles in the application.
I realize this isn't enough information for anyone to be able to say "this is your problem; do that," but nevertheless I am interested in any ideas on how to investigate the issue.
I didn't find why there was a margin-bottom: 0px that caused the issue in the first place, but I managed to find the place where the 10px margin was defined and add !important, which resolved the issue.
For anyone dealing with chakra-ui, don't just look for properties margin-bottom, marginBottom, or even the shorthand mb. Also look for my properties, as they define both the top and bottom margins for a component.
after I’ve been looking for a similar question to solve my issue, which was unsuccessful, I am now addressing to the community for help!
On my portfolio-website https://www.signz-fiction.at (umbrella quantum template) there is a preloader which doesn’t go away on mobile devices after you refresh the page (or press the green logo on top).
Although it is not an optimal solution for me i tried to disable the preloader under custom css but this did not work either
#preloader{display:none !important;}
Or
body > .preloader{ display: none; }
Though I am ui designer, I have only basic knowledge in web development and so I don't know how to fix the problem.
Grateful for any help, thx!
Ps:
The website is a bit older and there was a problem with the google font when i switched from http to https.
Could it be that the prealoder-thing is also related to the switch?
I think you may be confusing the loader animation with a preloader (which pre loads images and other assets to make them readily available).
On your site, the loader animation element has the class .loader, I've looked at your site with View-Source and haven't seen any element with the .preloader class
Try:
body .loader {
display: none;
}
but note that this might not help because the loader is controlled by JavaScript which might remove this property on page load.
Also, you have errors on your site:
mixed active content - avoid using http:// on your https:// site
a JS error you should look at, that may be the reason why the loader isn't being removed on time
I am making a graphical user interface containing two progress bars. In glade interface designer the bars look like this: Glade progress bar view but what I am getting on the screen is this: What I get on screen.
I tried everything from adjusting the width settings of the object in glade as well as trying to determine the width by using a style sheet like this:
GtkProgressBar {
-GtkProgressBar-min-horizontal-bar-height: 14;
-GtkProgressBar-min-vertical-bar-width: 14;
padding: 2px;
}
but without succes, is there anyone who knows how to resolve this issue?
Thanks in advance
EDIT:
So I reread the documentation this time paying closer attention to the program version.
GTK3 Version: 3.14, Glade Version 3.14.2
according to the GTKprogressbar which i am not allowed to properly link, the The “min-vertical-bar-width” style property should still work. Even though it is not recommended for higher versions. Another added piece of information that might be of use is that I am using this on a raspberry pi, raspbian setup and I believe the GTK is the latest available version for this setup.
i just found something like that:
progress, trough {
min-height: 30px;
}
I'm currently using a css filter in a node-webkit (v0.11.2) application on Windows 7 (64 bit) like so:
html {
-webkit-filter: invert();
}
This works fine for the most part, but when the user maximizes the window and then attempts to drag the window, there is a huge performance lag. The lag goes away completely without the filter.
I don't see the same performance issues in the browser, so this appears to be a node-webkit issue.
I'm adding responsive styles for our website built in Plone 4 CMS and testing on an old iPod 2 device. When viewing on this device, the logo.png does not display. Plone.org top left logo has similar problem and does not appear on this device. Other Plone websites tested have logos appearing.
I've changed the logo to a different format, i.e. logo.gif, and logo.jpg in the 'base_properties.props' file with no improved results. I was careful to ensure spelling of logo files was accurate.
Many Thanks
It's explicitly removed in the mobile.css file:
https://github.com/plone/plonetheme.sunburst/blob/master/plonetheme/sunburst/skins/sunburst_styles/mobile.css#L11
#portal-logo {
display: none;
}
I believe you just have to add the icon to a link object in the element.
Take a look at http://www.falsepositives.com/index.php/2011/01/31/adding-favicons-for-moble-safari-web-sites-ipodiphoneipad/
This could be done by customizing the main_template or by customizing/adding a viewlet that is in the head.