I recently switched to Ionic 4 and I'm having some troubles with the SCSS.
I have a very basic home page :
<ion-content padding>
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.4"></ion-progress-bar>
</div>
</ion-content>
And I would like to set a custom background color for my progress bar without using primary colors set in variable.scss
I saw while running the app that this is the result HTML inside the ion-progress-bar
<div class="progress" style="transform: scaleX(0.4);"></div>
<div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
These elements are inside a shadow root, and I understood that using a simple background-color: red in my SCSS wouldn't work.
Here is what I did in my SCSS file :
.quizz-progress{
ion-progress-bar{
.progress{
--background-color: var(--ion-color-primary);
}
.progress-buffer-bar{
--background-color: var(--ion-color-light);
}
}
}
But this has no effect. How could I change the color of the progress bar without using the color attribute ? Thank you in advance for any help
try like this
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.5"></ion-progress-bar>
</div>
.quizz-progress {
ion-progress-bar {
--background: green;
--buffer-background: red;
--progress-background: black;
}
}
here CSS Custom Properties
Related
I have a a section that needs to be full width. Ok, fluid-container. Now, within that, i need two colummns, -8 and -4, each with a different background colour. Ok, no problems.
Now the design calls for the content in these columns (.left and .right) to have copy as if it was in a .container
Here's my html snipper
<div class="container-fluid homeBannerCTAs">
<div class="row">
<div class="col-sm-12 col-md-8 left">
<div class="">
<h2>Left CTA</h2>
</div>
</div>
<div class="col-sm-12 col-md-4 right">
<div class="">
<h2>right CTA</h2>
</div>
</div>
</div>
</div>
and my sass snippet which is giving a height and setting the bg colours.
.homeBannerCTAs {
#include breakpoint(lg) {
height : 234px;
}
.left {
height : inherit;
background : #004557;
}
.right {
height : inherit;
background : #dfc986;
}
}
And the design portion.
Here's my full prototype
http://boilerplate.fls-interactive.com/kffTemplate.php
I don't have the mobile design yet (yeah, i know), but i'm assuming these will stack.
I'm kinda banging my head here on this.
Cheers.
Do you have to use Bootstrap, or could you use Flexbox here? Something like this could be pretty easily achieved with Flexbox. If you can use Flexbox, let me know and I'll post a Codepen.
OK, something like
.container {
display:flex;
}
.left-col {
flex: 2 0 auto;
padding:20px;
background:#CCC;
}
.right-col {
flex:1 1 auto;
padding:20px;
background:#999;
}
Here's a very basic CodePen:
http://codepen.io/toddsdarling/pen/akgqJy"
You can adjust the flex of each container to take up more or less room, and also set the height (and max-height as well).
I do this sometimes with columns that I don't want to shrink past a certain width. You can do something like "flex:0 400px", for example.
I'm trying to duplicate the effect I see in the Bootstrap docs and elsewhere:
When you hover over an h1/h2/h3 etc, a glyph appears that enables you to copy/paste a url that includes a fragment identifier eg http://foo.com/woof.html#page_fragment
Picture:
The "chain" icon only shows on the left on hover
Question: is this affect available from within the Bootstrap library or elsewhere?
And what is the name of this type of UX?
Like you noticed bootstrap has no native way to do that : however, with little css and html it will work perfectly :
Working fiddle : https://jsfiddle.net/5of43a4r/
CSS :
h1:hover a.anchorjs-link {
display: block !important;
}
HTML :
<h1>
<a class="anchorjs-link" href="#page_fragment" style="position: absolute; margin-left: -1em; padding-right: 0.5em;display: none">
<span class="glyphicon glyphicon-link" aria-hidden="true"></span> </a>
H1 TEXT
</h1>
Starting with the "anchorJS" clue from Sébastien's answer, I found Bootstrap Anchor, "The missing Bootstrap plugin for anchor support."
I tried several ways to override bootstrap3 nav-pills active color via CSS but it seems the LESS takes priority. I tried also using !important on the relative CSS properties with no luck: the LESS always has priority.
The only way I found is to obviously recompile bootstrap with customized nav-pills colors, but I'd prefer to use CSS so I can rely on CDN.
Any hint?
The relative affix/scrollspy is working of course via:
<body data-spy="scroll">
...
<ul class="nav nav-pills nav-stacked affix-top hidden-print" data-toggle="affix" data-spy="affix">
Relative jsfiddle
Not sure what you did, but this code works:
.nav-pills > li.active > a {
background-color:red;
}
// This changes the color of the active
.nav-pills>li.active>a:hover {
background-color:red;
}
// This changes the color of the hovered pill
I have the following structure of the Worklight application page:
<body>
<div with heading/>
<div with view/>
<div with Tab bar/>
<div with simple dialog/>
</body>
When I build the app for iPad and test it on it i have the following problem.
Dialog window puts gray unclickable layer on everything except the tab bar.
Why the tab bar stays available?
Is it a bug or I'm doing wrong?
Have you tried to put the heading, tab bar and dialog in the view?
Who invoke simpleDialog? try this
<body>
<div id="home" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<div with heading/>
<div with simple dialog
<button data-dojo-type='dojox.mobile.Button' onClick="openDialog()">
/>
<div with Tab bar/>
</div>
</body>
for invoke simple dialog, write
function openDialog(){
WL.SimpleDialog.show("text ", "text",[{text: "buttonName", handler: function() {WL.Logger.debug("dfsdfd"); }
}]
}
);
I tried put in views in a different variations, but it still didn't work.
Than while debugging I found out that the grey cover, which should cover everything in background has a
postion: absolute;
than I override this css class with
position: fixed;
and everything became great:)
I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.
This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.
here is the HTML:
<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
<div class="x-mask-loading">
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>
</div>
<div class="x-loading-msg">Loading...</div>
</div>
</div>
If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.
I hope you can help me, any suggestions are greatly appreciated.
Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.
If you add the following CSS it will leave the mask's background transparent.
.x-mask, .x-mask.x-mask-gray
{
background-color: transparent;
}
Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Please wait...",
onBeforeLoad: function(){
if (!this.disabled) {
this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
this.fireEvent('show', this, this.el, this.store);
}
}
});
myMask.show();
Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.
Hope this helps
Stuart