I have application where i need to hide the default dot indicator on the carousel control, and instead for default indicator i have to replace it with customized images?
To hide the default dot indicator in Ext.carousel.Carousel component, use this,
indicator: false
I guess you can inspect the CSS for the indicator object.
For instance, go to the Kitchen Sink > User Interface > Carousel and inspect one of the dots :
.x-carousel-indicator span {
display: block;
width: .5em;
height: .5em;
-webkit-border-radius: .25em;
border-radius: .25em;
margin: .2em;
}
Then, you just need to override that CSS class
Related
This should be an easier question, but I can't find the answer for it. I have a simple React form, and I want to put multiple levels accordions. I manage to create the subaccordions, but those are not full width. The react application is available at https://iquasere.github.io/MOSGUITO/ , with the broken accordions at the end.
The sub-accordians are displaying as expected because of the flex property, the default flex direction is row. Just update the direction of the container and it should work.
.MuiAccordionDetails-root {
display: flex;
flex-direction: column; // <-- Here
padding: 8px 16px 16px;
}
I want to add an image inside the doughnut
you can see my doughnut here
I already tried by using background-image:url(image.png) but is there any way to do it.
Technically, it's not possible to add images in Charts.
However, you can easily work with that by adding an image as a background for chart container. I.e.:
#chartdiv {
width: 210px;
height: 210px;
margin: 0 auto;
background: transparent url(YourImage) no-repeat center 70px;
}
I would like to use the angular material datepicker as a widget to control an instance of fullCalendar. Is there a way to force it to stay alway open and in a particular div? I know how to do it easily with bootstrap or jqueryUI but I would not want to add an extra dependency to my project.
it's working on angular version 6.x
<mat-calendar [selected]="selectedDate"
(selectedChange)="selectedChange($event)"
(yearSelected)="yearSelected()"
(monthSelected)="monthSelected()"
(_userSelection)="userSelection()"
(cdkAutofill)="cdkAutofill()">
</mat-calendar>
Emits when the currently selected date changes
readonly selectedChange: EventEmitter<D>;
Emits the year chosen in multiyear view.
This doesn't simply a change on the selected date
readonly yearSelected: EventEmitter<D>;
Emits the month chosen in year view.
This doesn't simply a change on the selected date
readonly monthSelected: EventEmitter<D>;
Emits when any date is selected
readonly _userSelection: EventEmitter<void>;
but still missing some needed events
like an event for the next and previous buttons
img
GitHub issue
calendar.ts
Well, you can get that to work with some CSS, but the internal scroll position of the month scroller starts always at the top (1932).
md-calendar is the internal directive that renders the datepicker, so just use that.
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
And set the CSS to fixed size, which is usually calculated by the datepicker.
.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
}
But you can probably write your own directive that requires the mdCalendar controller and set the scroll position there.
http://codepen.io/kuhnroyal/pen/EPQpGE
Following up on #kuhnroyal his answer. If you want to go below 340px of width you can do the following:
.time-date {
font-size: 12px !important;
}
.fixed-calendar {
width: 280px;
height: 285px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 280px !important;
height: 240px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 280px !important;
height: 246px;
}
.fixed-calendar .md-calendar-date-selection-indicator {
width: 35px;
height: 35px;
line-height: 35px;
}
This for instance, sets the width to 280px. Just be sure that you set the selection indicator as well.
I wanted the height to be 240px as well, therefore I set the height of the scroll mask to 240px.
I have 2 stores, when I execute them I am getting the following DIV being created and I don't understand why. Its directly under the x-body.
It doesn't always happen but once created and every time i refresh a store the spinner on a grid panel is surround by a square with a drop shadow because the display:none is changed to display:block while this spinner is loading.
<div class="x-css-shadow" role="presentation" id="ext-gen1308"
style="z-index: 29002; right: auto; left: 245px; top: 431px; width:
189px; height: 189px; box-shadow: rgb(136, 136, 136) 0px 0px 6px;
display: block;"></div>
Does anyone know why its happening ? It has created a id under the html but i don't know where its coming from.
Any ideas?
By default the shadow of LoadMask is set to 'frame', you can easily override that and disable the shadow, for example:
Ext.define('Fiddle.LoadMask', {
override: 'Ext.LoadMask',
floating: {
shadow: false
}
});
Working example: https://fiddle.sencha.com/#fiddle/1254
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