Am facing one issue in sencha touch along with phonegap. Having 'xtype:panel' with property 'cls:topImgPanel' under scss code where am setting background Image for panel.
Login.js
{
xtype : 'panel',
cls : 'topImgPanel',
height : '15%',
docked : 'top',
}
login.scss
.topImgPanel {
background-image: url("img/TOP_Printer_HD1.png") !important;
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
This code seems to running in browsers, but when using phonegap to run it in my android emulator. Images are not visible anymore.
Not able to figure out what's wrong.
After some struggle, if found this link
As mentioned, we need to put images into root folder, so in my login.scss :
.topImgPanel {
background-image: url("../../TOP_Printer_HD1.png") !important; //changed path
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
and i copied my image files under the directory 'phonegap/www'.
Hope this helps !!
Your image url is not ok.
In fact, the url you provide to the path of your image should be related to the location of your CSS file. So you need to change it according to your Android Phone.
Related
I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
I have made a transparent background tabbar on my ionic/angular app. I have the following code in my app.scss
.tabbar {
background: transparent !important;
border: none !important;
}
.tabs-ios .tabbar {
background: transparent !important;
border: none !important;
}
.ion-tabs {
background: transparent !important;
border: none !important;
}
It works fine when I test in the browser, but when I test with ionic view app, there is still a stock tabbar showing on the first page loaded by tabs page. Tabs are transparent on every other page, except the first one that is the "home" page.
Does anyone know why this is? Is this just a bug in the exceptionally unreliable Ionic View app or a problem I should be trying to fix?
I've a big problem. Google Search Console doesn't correctly fetch my website. The website consist of five sections with parameters:
width: 100%;
height: 100vh;
min-height: 100%;
Google bot renders only first section, what about the others?
Add a max-height to 1080px for the element which has height: 100vh and leave min-height blank.
For example:
.element {
height: 100vh;
max-height: 1080px;
}
For us, this solved the issue within Google Search Console Visual renderer.
My Drupal site takes a while to load, and while it's loading everything looks messed up. So I opted for a simple solution that it's using a loading screen with this kind of solution:
Display a loading bar before the entire page is loaded .
But I have no idea how to implement it in Drupal 7.
Can you please help me with some clues?
Thank you!
.ajax-progress-throbber {
z-index: 1500;
border: 2px solid #C0C0C0;
position: fixed;
background: url('loader.gif') no-repeat center #ccc !important;
opacity:0.6;
padding:20px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
width:100%;
min-width: 100%;
height:100%;
left:0;
top:0;
}
I have done like this by putting this code in my css file and used a loader.gif image which is laso in the same folder where my css file is and use that class . Basically i use loader image every time i trigger ajax. You can use it as you want with according to different class.