Was researching for a while before asking it here, could somebody assist : I would like to change on hover color.
Something like this :
const StyledSelect = styled(Select)`
.ant-select-dropdown-menu > .ant-select-dropdown-menu-item :hover{
background-color: green !important;
}
`;
Solution :
const SelectDropdown = styled.div`
.ant-select-dropdown-menu-item:not(.ant-select-dropdown-menu-item-disabled):hover {
background-color: red !important;
}
`;
<Select dropdownRender={(menu =>
<SelectDropdown>{menu}</SelectDropdown>
)}
>
If active one needs to be also same color you can do the following :
.ant-select-dropdown-menu-item-active{
background-color: lightgray !important;
}
Related
I want to change the placeholder color of Select component in Ant Design.
I've tried these below, but none of them work.
.ant-select-selection {
:placeholder-shown {
color: red !important;
}
&:placeholder-shown {
color: red !important;
}
:::placeholder {
color: red !important;
}
color: black !important;
&::-webkit-input-placeholder {
color: blue !important;
}
&:placeholder {
color: blue !important;
}
:placeholder {
color: blue !important;
}
::-webkit-input-placeholder {
color: blue !important;
}
}
::-webkit-input-placeholder {
color: blue !important;
}
I tried Hemanthvrm's suggestion, but it seems they changed the class name of the placeholder element to .ant-select-selection-placeholder in Ant Design 4. What worked for me was the following:
.ant-select-selection-placeholder {
color: #f0f0f0;
}
Please mind there's an opacity: 0.4; by default on the placeholder element, so whatever color you use will look faded out.
Also mind this placeholder styling behavior is not consistent across different Ant components. For example, to style the placeholder of the date-range picker I had to do the following:
.ant-picker-input input::placeholder {
color: #f0f0f0;
}
Bad news is, all these names might change again in a new major version. So better declare all the Ant related styles in one file, so your project becomes easily resilient to such changes.
This will work
.ant-select-selection__placeholder{
color : blue;
}
Working Sample
https://codesandbox.io/s/139lnkwwm3
I am new to AngularJS. How do I apply the ng-class to the alternating row in ui-grid with gridOptions?
It is kind of like with
ng-repeat (ng-class="$odd ? 'odd' : 'even')
You can achieve that with custom css:
Odd rows
.ui-grid-row:nth-child(2n) .ui-grid-cell {
background-color: //color you desire;
}
You can change colors with CSS:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: yellow;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: blue;
}
Also you can obtain CSS and experiment with changing other ui-grid styles here:
http://ui-grid.info/customizer/
I'm searching for a simple solution to build a toolbar to insert textile markup.
No parser is needed, I only miss a toolbar / buttons to insert. Like quicktags for bbcode.
Is there a textile editor / toolbar or a universal js class?
Insert markup like "*" around selected text
Toogle markup (remove if inserted before
With some examples and hints I could try to build it myself.
I know MarkitUp, but would like to use a minimal and simple toolbar.
Maybe something like used here...
Found a solution to insert markup. Should do it!
Basic example found with google
JSFiddle demo
I put together a JSFiddle demo with a contenteditable div and simple insert B-tag "button".
var selected = '';
var before = '<b>';
var after = '</b>';
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function insert(element, selection, before, after) {
$(element).html($(element).html().replace(selection, before+selection+after));
}
$(document).ready(function (){
$('.editable').bind('mouseup touchend', function (e){
selected = getSelectionText();
});
$('#insertB').click(function(e) {
insert('.editable', selected, before, after);
$('.editable').focus();
});
$('#toggleEditor').click(function() {
var editable = $('.editable');
if (editable.attr('contenteditable') == 'false') {
editable.attr('contenteditable','true').addClass('wysiwyg').focus();
}
else {
editable.attr('contenteditable','false').removeClass('wysiwyg');
}
});
});
.editable {
border: dashed black 2px;
padding: 10px;
margin-bottom: 20px;
}
.wysiwyg {
border: solid red 2px;
}
span {
padding: 5px;
border: solid black 1px;
margin-right: 20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<body >
<div class="editable" contenteditable=false>
Just a simple text...
</div>
<span id="insertB">insert Bold</span><span id="toggleEditor">Toggle editor</span>
</body>
In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.
Here is what I do:
#Html.ActionLink("Lire la suite...", "Details", new { slug = #post.Slug } , new { #class = "dotted-link" } )
The CSS:
.dotted-link
{
text-decoration: none;
border-bottom-style:dotted;
border-bottom-width: 1px;
}
The result:
The result when hover it:
As you can see, I have a dotted border and a plain border ?!
What is the best way to achieve this?
Thanks.
a.dotted-link {
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a.dotted-link:hover {
border-bottom-style: none;
}
I'm trying ckeditor, but I can't set the toolbar location to the bottom (by default it is set to the top).
I read the documentation, and I wrote this snipet in config.js file:
CKEDITOR.editorConfig = function( config )
{
config.toolbarLocation = 'bottom';
}
In config.js I have defined a toolbar and config.toolbarLocation = 'bottom' then I call ckeditor in this mode:
CKEDITOR.replace('editor', { toolbar : 'Full' });
Did I foget something else? It doesn't work. I see only textarea without toolbar (the toolbar at the top disappears).
Can you help me, please?
I guess it is priority to be covered. Try this:
CKEDITOR.replace('editor', { toolbar : 'Full', toolbarLocation : 'bottom' });
In Ckeditor 4 they have option to move toolbar to bottom but not in Ckeditor 5.
Check configuration table here
So, I did the CSS tweak.
Add a parent class to parent div of Ckeditor element and then add these:
1. Using flex-direction to flip order of toolbar and editing area:
.ck.ck-reset.ck-editor {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
2. Assign less height to Toolbar and more to edit area:
.ck.ck-editor__main>.ck-editor__editable {
height: 200px;
}
.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck-sticky-panel__content {
height: 54px;
}
2. Remove shadow and outline when focusing on edit area (optional, only if you want):
.ck-focused, .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
border: none;
border: none;
outline: none !important;
-moz-outline: none !important;
-webkit-outline: none !important;
-ms-outline: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
try this code :
CKEDITOR.replace('editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
// extraPlugins: 'htmlwriter',
toolbarLocation: 'bottom',
height: 200,
width: '100%',
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['TextColor']
]});
use this :
.ck.ck-editor {
display: flex;
flex-direction: column-reverse;
}