I'm using antd radios and checkboxes. I want to give custom colors to them. I found answer about checkbox but found no way to change radio button color.
Is there any way to do so?
You can achive it by overriding following css classes:
.ant-radio-checked .ant-radio-inner{
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after{
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red ;
}
First block is responsible for coloring the circle around the dot in radio. You can ignore !important rule but then you have to override :focus selector like:
.ant-radio-checked .ant-radio-inner:focus{
border-color: red;
}
Second block color the dot in the middle of selected radio. The last one color circle on hover. I am not completely sure why ant-radio-inner should be inside radio:hover, but it works for me.
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
I need to show Action buttons to the left on row hover. The below reference have the solution I need but that has the action buttons to the right. I tried changing css but still it doesn't work.
Is there any way I can achieve this thru CSS. Thanks in advance
Reference: ag-Grid - show buttons on row hover like in Gmail
Reference Plunker: https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview
This is the css I used
.ag-pinned-left-header,
.ag-horizontal-left-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
pointer-events: initial;
}
/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
I've had a look through the plnkr and the reason pinning it to left doesn't work, is that the "pinned" property is affecting the className, not actually pinning it to the left, but rather giving it the className of ag-pinned-left-cols-container which is not helpful.
An easy fix is to change the right property to left instead in the css file as shown below. This is line 23-27 in the plnkr. Make sure you're changing the actual css property, and not the right inside the className
Edit:
After a lot of debugging I found the issue with the code.
The reason why it's not working with the pinned: left is because it's being rendered as the left-most column, and everything rendering after it will be above it in the stack. So in practice, when setting it's position to position: absolute !important it was still there, just behind the other columns. Changing it's z-index will resolve the issue. You could tweak the value of the z-index to a smaller one if you want.
After changing the z-index I was able to display both the left and right action buttons. You have to change the z-index in ag-pinned-left-cols-container
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
z-index: 10000000;
pointer-events: none;
}
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
I have read a few questions here and here on this on StackOverflow but nothing seems to help with my situation.
I want to set the background color and border of a textfield dynamically.
My textfield looks like this, but the background is still not changed :
This is because of an image in the background that gives a shading effect. So I try and remove it in the CSS using background-image:none; and background:none; :
.invalid-component {
background-color : #f4f777;
border: 2px dotted #ffee27; //works!!
background-image:none;
background:none;
}
This still has no effect, the image is not removed and the background color does not change. Any help?
Im taking a guess here and going for ExtJS 4.2.1 with Classic theme.
So just change your CSS to
.invalid-component {
background : #f4f777 !important;
border: 2px dotted #ffee27; //works!!
}
I'm having troubles giving some cells some styling in ExtJS 5.
I have two style rules in the index page:
.yellow-cell .x-grid-cell{
font-weight: bold;
background-color: yellow;
}
.red-cell .x-grid-cell{
color:blue;
background-color: red;
}
On select event, the cell selected should be colored with yellow-cell rule. and the cell before it needed to be colored with the other rule red-cell, the rest of the table is just defaults.
var gridTable = Ext.getCmp('gridTable');
gridTable.on("select",function(obj, record, index, eOpts){
gridTable.getView().addItemCls(record, 'yellow-cell');
});
and on deselect I use removeItemCls() then addItemCls() to add the red-cell styling.
Any chance there is a proper way to do this? because my code just color the whole row, and I want to color just the selected/deselected cells.
I'm really stuck here, any help will be highly appreciated.
gridTable.getView().getCell(rec,col).addCls('yellow-cell');
Also you could try console.log(record) to find the right div name and do the following:
Ext.get('idOfcellDiv...').addClas('yellow-cell');