For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!
Related
tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.
here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js
thanks in advance :)
When using styled-component, the style would be applied with className sc-....
In your case, its style would be applied in div containing .slick-slider.
But, .ant-carousel is className for parent of that.
So, if it was included in the selector, style will be not applied.
Try this.
const CarouselWrapper = styled(Carousel)`
> .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 100%;
}
> .slick-dots li.slick-active button {
width: 7px;
height: 7px;
border-radius: 100%;
background: red;
}
`;
I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such:
.MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] {
padding-top: 19px;
padding-left: 8px;
}
I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this component to look this way since they add padding for the label above it.
Codebox
You need to match the specificity of the default styles in order to override it successfully. The default styles have a class selector plus an attribute selector. You can match this specificity by nesting the same attribute selector within your inputRoot class styles as shown below:
const CustomAutocomplete = withStyles({
inputRoot: {
backgroundColor: "white",
border: "solid",
'&[class*="MuiFilledInput-root"]': {
paddingTop: 0,
paddingLeft: 0
}
}
})(Autocomplete);
I want to change placeholder color in my text input in ionic 3. Here is my code
in main.html
<ion-input class="changeColor" placeholder="test" type="tel"></ion-input>
main.scss
.changeColor::-moz-placeholder {
color: white;
}
.changeColor:-ms-input-placeholder {
color: white;
}
.changeColor::-webkit-input-placeholder {
text-indent: 0;
color: white;
}
thanks for reading my problem, I want to know the reason why this placeholder not changing the color.
have you tried this :
ion-input{
input::placeholder {
color:red!important;
}
}
You can edit the place holder color by overriding the ionic Sass variable. Check this link. You can assign $text-input-placeholder-color variable to the color you want.
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 an htmleditor field in a form I created in extjs 4.2. I have it hiding the toolbar in the afterrender listener:
listeners: {
afterrender: function(editor) {
editor.getToolbar().hide();
},
scope: this
}
However, it looks like hiding it also hides the top border of the text area. Is there a way I can add the border back or have it only hide the toolbar and not the top border?
Add cls: topBorder and add this to your css file:
.topBorder {
border-top: 1px solid #b5b8c8;
}
Not the most elegant solution, but it works.
Use this CSS class:
.x-component.x-html-editor-input.x-box-item.x-component-default {
border-top: 1px solid #b5b8c8;
}