My application have a menu options and I need to change the color of a menu option depend of the selection of a textbox.
In the controller file I wrote this:
[HttpPost]
public ActionResult Rise(int rise)
{
Session["Var1"] = rise;
if (rise != 0)
{
ViewBag.Var1= "class = active";
}
else
{
ViewBag.Var1 = "class = visited";
}
return View();
}
In my css file I wrote this:
a:visited
{
font-size: large;
color: green;
}
a:active {
font-size: large;
color: blue;
}
a:link {
font-size: large;
color: #ffffff;
}
a:hover {
background-color: lightblue;
}
And in my view I wrote this:
<li>Option1</li>
When I execute the application and I write a value in the textbox and click on the submit button I see that the menu option change the colour and change to Green colour again.
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'm using MatSnackBar for my angular 5 project, and I cannot seem to change the color of the 'action' button.
I've injected the snack bar to my HttpInterceptor:
this.snackBar.open('Invalid Login', 'Ok', {
duration: 2000,
panelClass: ['my-snack-bar']
});
my css:
.my-snack-bar {
background-color: #E8EAF6;
color: #3D5AFE;
}
How can I change the 'Ok' action button color?
Version: "#angular/material": "^5.2.4",
You can access the colors with the panelClass option + the generated class ".mat-simple-snackbar-action".
My example:
snackbar.component.ts
private configSuccess: MatSnackBarConfig = {
panelClass: ['style-success'],
};
private configError: MatSnackBarConfig = {
panelClass: ['style-error'],
};
public snackbarSuccess(message) {
this.snackBar.open(message, 'close', this.configSucces);
}
public snackbarError(message) {
this.snackBar.open(message, 'close', this.configError);
}
snackbar.component.css
.style-success {
color: $primary-text;
background-color: $primary;
}
.style-success .mat-simple-snackbar-action {
color: $primary-text;
}
.style-error {
color: $warn-text;
background-color: $warn;
}
.style-error .mat-simple-snackbar-action {
color: $warn-text;
}
Extra info If using a mixin for custom themes you can do something like this to get all the colors:
#mixin snackbar($theme) {
$primary: mat-color(map-get($theme, primary));
$primary-text: mat-color(map-get($theme, primary), default-contrast);
$warn: mat-color(map-get($theme, warn));
$warn-text: mat-color(map-get($theme, warn), default-contrast);
.style-success {
color: $primary-text;
background-color: $primary;
}
.style-success .mat-simple-snackbar-action {
color: $primary-text;
}
.style-error {
color: $warn-text;
background-color: $warn;
}
.style-error .mat-simple-snackbar-action {
color: $warn-text;
}
}
As mentioned above one can customise the style of the snack bar using the panelClass configurationn.
this.snackBar.open(message, action, {
duration: 40000,
panelClass: "success-dialog"
});
The key here is to override via CSS the mat-simple-snackbar-action. This will do the trick of changing the action button text color.
.success-dialog {
color: white !important;
background-color: $success !important;
.mat-simple-snackbar-action {
color: white !important;
}
}
This worked for me:
.my-snack-bar button {
background-color: gray;
color: white;
}
Use this
.my-snack-bar {
background-color: #E8EAF6;
}
css in your style.css(or .scss) file. It will not work if you put anywhere else.
please add the following in app style.css
.mat-simple-snackbar { font-weight: 600; } // text
.mat-simple-snackbar-action > button { color: red } // action
enjoy!
For me, below code is worked.
::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
color: black;
}
Steig's answer is correct but if that doesn't work then you should add /deep/ in front of your class:
/deep/ .my-snack-bar button {
background-color: gray;
color: white;
}
You can use this:
let mysnackbar: any = document.querySelectorAll('.my-snack-bar')[0];
mysnackbar.style.cssText += "color: #3D5AFE;backgroundColor: #E8EAF6";
it works for me.
I need a jQuery Mobile flipswitch with custom width & height. I managed to change the size of it by wrapping the flipswitch in a div and applying the following CSS:
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
}
However the text is not positioned correctly. Check the jsfiddle here:
https://jsfiddle.net/dinkoivanov/8czs4qzn/
I think I might not be doing the correct thing. Can you advise if that is possible in jQuery Mobile?
As exemplified here you might need to introduce in CSS
custom indentations
custom widths
because the length of custom labels differs from the length of the
standard labels
You can position the text by correcting the indentation in the CSS
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
}
Updated: https://jsfiddle.net/8czs4qzn/1/
Position the text in the middle (see comment below):
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
line-height: inherit;
}
#flipswitchWrapper .ui-flipswitch-off {
line-height: inherit;
}
With vertical alignment of labels: https://jsfiddle.net/8czs4qzn/3/
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;
}