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
Related
I would like to 1) make sure radio buttons are aligned to left 2) decrease the amount of vertical space between label and radio button texts and vertical space between each text
In the example below you can see radio button texts are centered, and also there is about half text height space between them which I would like to decrease
https://codesandbox.io/s/1l3yc9?file=/index.js
Adding to the previous answer to fully answer your question, the label of the radio button can be left aligned using bootstrap's flex class names:
<b-form-radio
v-model="orderType"
:aria-describedby="ariaDescribedby"
name="radios-stacked"
value="L"
class="d-flex justify-content-start"
>Limit</b-form-radio
>
link to completely working CodeSandbox
Here you go...
I don't understand what you're trying to achieve. Can you explain please?
Add the following CSS:
Reduce the vertical space between the label and the first radio button:
legend#__BVID__6__BV_label_,
legend#__BVID__12__BV_label_ {
padding-bottom: 0;
}
Reduce the vertical space between the two radio buttons:
.custom-control {
min-height: initial;
}
.custom-control-label {
line-height: 1.1;
}
.custom-control-label::before,
.custom-control-label::after {
top: 1px;
}
See the forked CodeSandbox here.
To prevent the radio buttons from getting centered, remove the class class="form-inline" from your <b-form-group></b-form-group>.
It will adjust the texts accordingly.
So you should have something like this:
<b-form-group
label="Order type"
v-slot="{ ariaDescribedby }"
label-align="left"
>
...
</b-form-group>
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
I am using bootbox.js to display some confirmation and error messages to my user.To do this I provide the className attribute to bootbox however I noticed that the top left and right radius of .modal-header dissapear when I apply a class that changes it background.Here is a jsfiddle
I know that I can solve it by adding a border-radius:5px 5px 0px 0px to .errorAlert .modal-header but I want to understand why this is happening in the first place.
In case you have problems with the link here is the minimum code to reproduce the issue:
HTML
<div class='btn btn-info' id = "simpleModal">
Show just a simple modal
</div>
<div class='btn btn-info' id="customClass">
Show a modal with a custom class
</div>
CSS:
.errorAlert .modal-header{
background:red;
}
JavaScript:
$(function(){
$("#simpleModal").on("click",function(){
bootbox.alert({title:"Just a modal",message:"With no custom class"})
})
$("#customClass").on("click",function(){
bootbox.alert({title:"Just a modal",message:"With .errorAlert class applied",className:"errorAlert"})
})
})
That's because border radius in Bootstrap is applied to the .modal-content and by default .modal-header doesn't have a background. When you apply background to the modal header border radius disappears because you cover them by that red background of modal header which doesn't have border radius.
I want to limit viewport, where the nodes can be dragged and displayed to full hd resolution (1920×1080 px). Is it possible with cy.resize() function? I've tried to set cy.resize({width: 1920px, height: 1080px}), but it doesn't work.
Use CSS on your container.
If you read the docs for cy.resize(), you'll notice it just syncs with CSS changes.
You can use custom CSS also when you add graphs in HTML.
Like
<div class="col" [hidden]="noGraph">
<div id="cy" class="bg-white graph-dynamic-height"></div>
</div>
and in CSS
.graph-dynamic-height {
height: calc(100vh - 215px);
}
The above code work for me.
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