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?
Related
I have a button which appears on the screen till the window width is 300px and after that, it disappears.
Here is the code:
<button className='Button'>Submit</button>
CSS code:
.Button{
color: cyan;
#media( min-width: 300px){
display: none;
}
}
For testing, I am using react testing library and jest. Please guide me on how to test resize events.
When I view my React app on mobile there is always extra space to the right:
https://dsousadev.github.io/23imgs/
I can't see this extra space when I use dev tools to simulate a mobile view, but when I view the site on a variety of mobile browsers the space is there and the app doesn't auto fit.
Here's the current CSS in my media query:
#media all and (max-width: 414px) {
.ImageCard,
#CardImage {
width: 314px;
}
#CardImage {
height: 314px;
}
ul {
font-size: 1.2rem;
padding: 0 15px;
}
}
The element <input accept="image/*" name type="file"> is causing the issue.
If I apply display: none to .fileContainer input, the space goes away.
Edit
Alright, so looking into the issue a bit more, it looks like semantic.min.css is applying a font-size: 100% to button, input, optgroup, select, textarea. This is causing your input to grow in size (here's the input when visible):
If we disable the font-size: 100%, the input renders correctly:
After which, your original styles work:
So display: none or reverting font-size will work :)
I am working on this project. I have an angular-google-map directive. I am overwritting defaults markers with labelClass.
CSS is working fine but does not hover.
.marker {
color: white;
border: 2px white solid;
border-radius: 50px;
text-align: center;
font-size: 20px;
letter-spacing: 0.1em;
font-weight: bold;
}
.marker:hover {
background-color: #C52183;
animation: pulse 1s;
}
/* ANIMATIONS */
#keyframes pulse {
50% {
transform: scale(4);
}
100% {
transform: scale(1);
}
}
If you check the example you can see an animation but not with real color. I sometimes get the real animation.
The full project is here.
pd: The problem can't be the animation, if i just try to change some css properties i dont get effect, so i think that the problem is with google maps and css.
I finally fixed this "bug".
The problem was on the MarkerWithLabel library but really isn't a bug, its just an impossibility (with this library). Checking the library we see :
// Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil
// in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that
// events can be captured even if the label is in the shadow of a google.maps.InfoWindow.
// Code is included here to ensure the veil is always exactly the same size as the label.
this.eventDiv_ = document.createElement("div");
this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;
I just modified the library so i don't create invisible div anymore and also i intercept events with real label. Now it's working under my requirements.
more info about the problem
demo working
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.
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.