I’m using split-pane component and want to change the min-width and max-width of the left panel according to my requirements .
For this I’m changing the the provided sass variables for SplitPane from ionic docs in the variables.scss file.
but the change is not reflected in the main.css file after doing ionic serve.
First I thought it could be problem with sass but I changed another variable called #background-color and it worked .
Please can anyone help with this?
Here is the ionic info
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
local packages:
#ionic/app-scripts : 1.1.4
Ionic Framework : ionic-angular 2.2.0
System:
Node : v6.11.1
npm : 3.10.10
OS : Windows 10
Misc:
backend : legacy
Thanks.
According to the documentation here
By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath.
<ion-split-pane when="(min-width: 475px)">
<!-- our side menu -->
<ion-menu [content]="content">
....
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>
You can also customize it in your code
<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
constructor(){}
shouldShow(){
if(conditionA){
return true
} else {
return false
}
}
}
Related
I am trying to style non readonly text areas. Although it's working fine locally with ng serve, the class is not being applied at all when deploying with ng build --prod.
This is the CSS code:
.my-class:not(:read-only) {
...;
}
With ng serve, the browser dev console displays the following css:
.my-class[_ngcontent-c11]:not(:-moz-read-only) {
...;
}
.my-class[_ngcontent-c11]:not(:read-only) {
...;
}
However, when I use ng build --prod, the CSS I get is
.my-class:not(:-moz-read-only),
.my-class:not(:read-only) {
...;
}
Unfortunately, the last version is simply not working. The style is not applied to the element. If I use Chrome's override feature and remove the .my-class:not(:-moz-read-only), line completely, it works fine.
Why is the code different from ng serve to ng build --prod, why isn't the style being applied, and what can I do to fix it?
The angular version (project and CLI) I am using is 10.2.0 and I am using SCSS.
I installed gatsby cli and created a basic node / gatsby.js project.
The tutorial says "Gatsby works out of the box with CSS Modules."
I also wanted to use custom css properties as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
(1) I created src/layouts/variables.css and put in css with custom properties, like:
:root {
--brand-color: #ff3333;
}
(2) Then in src/layouts/index.css I added #import './variables.css' at the very top of the css file.
(3) because of the #import in the above step, I installed and added postcss-import as the first plugin, in my gatsby-config.js file. Not sure if this is correct, as it isn't named 'gatsby-plugin-*' like the other plugins.
(4) in my footer component (src/components/Footer) I have both index.js and index.module.css. In the index.module.css I put:
.footer {
color: var(--brand-color);
}
... thinking that --brand-color will cascade via imports through src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> my footer component.
But when I run gatsby-develop, it says:
warning in ./src/components/Footer/index.module.css
postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.
How can I fix this error? It does not allow the website to display properly.
OK I figured out what I was doing wrong:
Every (.module).css file that needs to use the "global" variables.css file must import it explicitly.
Adding #import '../../layouts/variables.css'; to my component's css file fixed this.
I've fouded this plugin to get the Immersive Android view on a Hybrid app (GitHub)
But the navbar is attached into the StatusBar
i've tried with css ..
.platform-android.has-translucent-status-bar.app-header-bar{ padding-top:25px!important; }
Any suggestion?
If you want to completely hide the status bar:
$ionicPlatform.showStatusBar(false);
Make sure to inject $ionicPlatform to the service/controller. Also make sure to install the Cordova Statusbar Plugin.
ionic plugin add cordova-plugin-statusbar
If you only want to push the content down a bit, you can do this:
body {
padding-top: 25px !important;
}
I have a project since today. I have an ionic project who comes from a Windows and I can't scroll the view in my web browser.
But when I create a project in Mac OSX I can scroll like a charm with maintaining my left click mouse and scroll (like it would be tactile).
So can someone help me to make this new project scrollable in Mac OSX please ?
Many thanks.
I have added to my ionic projects that do not need Cordova plugins the platform "Browser" to be able to deploy rapidly a nice webapp.
I faced the same issue and had to add this CSS property :
.isBrowserView {
overflow-y: auto !important;
}
On my app.run(), I have add the following code :
var deviceInformation = ionic.Platform.device();
if (deviceInformation.platform === "browser"){
$rootScope.isBrowser = true;
}else{
$rootScope.isBrowser = false;
}
Finally, I add this ng-class condition on my ion-contents
<ion-content ng-class="{ isBrowserView : isBrowser== true } ">
i'm having problems to see the bottom bar icons on a Sencha Touch app.
I'm using compass and scss to style the app.
Actually, after a research i'm using the mixing:
#include pictos-iconmask('home');
to import the icons that are used in the tabbar.
The bar elements are defined i that way:
{
title: 'FAQ',
iconCls: 'star'
},
And seems to be well-defined, in Safari the inspector shows the
-webkit-mask-image:theme_image("default", "pictos/home.png"); property but this is strikethrough. In Chrome the property doesn't appear, what could be the cause of that issue?
The attached image shows both scenarios, at the top Safari and the property that i mentioned. At bottom the bar without the "broken" placeholder that Safari shows.
I found a solution that increments the icons z-index property, but i tried this with no luck.
The workaround is like this:
.x-tabbar > * {
z-index: 999 !important;
}
Any help is appreciated!
EDIT 1: Someone have any idea?
In Sencha Touch 2.4.x you need to do the following :
Install Rub
Compass
Navigate into the app home folder (i.e. to the level of the index.html file)
In Terminal run sencha app watch
Open the resources/sass/app.scss and add the following code:
// This is different in 2.4.x. In earlier versions it was pictos-iconmask as you've indicated you tried in the question.
#include icon('browser');
Your tab panel item should have the iconCls set up like so:
{
.....,
title: 'Favorites',
iconCls: 'heart'
}
Additional (Optional) Step:
Sometimes the iconCls has been commented out in the framework (this has happened to me once before). In that case, go to AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
Search in the file for a line of code that reads :
#else if ($name == "star") { #return "S"; }
Uncomment the line if it's been commented.