I have a simple partial view that shows the result of an action and displays the message to use either success or failure. The partial view is rendered from inside the main view.
However the css styling is not working if I want to use a specific css ID for a div tag. If I apply a class then the style works. eg
The partial view looks:
#Code
ViewData("Title") = "Results"
If Model.Result = True Then
#<div id="success">#Model.Message</div>
Else
#<div id="notsuccess">#Model.Message</div>
End If
End Code
the line ##Model.Message somehow does not work. The CSS is like:
#success {
background-color:Lime;
font-style:italic;
font-size:larger;
}
#notsuccess {
background-color:Red;
font-style:italic;
font-size:larger;
}
However, if I change the css to be .success and change the line to use the .success class instead of id then it shows the styling. Can anyone please point me to issue?
I am using the default MVC project for MVC 3.
Most likely there is another div named #success. You'll need to paste/inspect the complete HTML view of the page.
Related
I'm creating PDF from HTML using weasyprint. I have a content that has dynamic number of pages.
I can start a new page after it with style="page-break-before: always;".
How do I make this new page yellow?
I would use #page :nth(3) { background: yellow; } if I new it was third page. But I don't know the length of the content before.
Maybe something like <page> could be styled?
Thanks!
Found in samples! You can use page css property to name target page.
#page mypagename{
background: yellow;
}
#element-on-styled-page{
page: mypagename;
}
For an Angular project I'm working on, I'm injecting HTML into a <div> like so:
<div class="myClass" [innerHTML]="htmlToInsert"></div>
The htmlToInsert contains a variety of things, notably <a> tags. Previously we were styling all these tags like so:
.myClass ::ng-deep a {
color: #f00;
text-decoration: none;
}
And this worked fine. But now I need the color of these links to be dynamically generated during component initialization, based on data coming in from elsewhere. All of the dynamic styling I've seen in Angular requires you to apply things directly to the HTML tag, but we don't have them here to work with.
How can I apply dynamic styling to HTML that is also dynamically generated? Can I directly change the CSS class somehow? Would using a pipe be the correct approach here? Is there another method I don't know about? I could maybe refactor code if there is absolutely no other way of doing this.
So if you can't modify the innerHTML you are passing in, you can achieve this functionality with a custom directive. Essentially you would tag your div that contains your innerHTML with a custom directive. That directive then looks for any anchor tags in it and changes the color based on an input.
// component.html
<div anchorColor [color]="dynamicColor" [innerHTML]="htmlToInsert"></div>
// directive.ts
#Directive({selector: '[anchorColor]'})
export class AnchorColorDirective implements OnAfterViewInit {
#Input() color: string;
constructor(private el: ElementRef){
}
// afterViewInit lifecycle hook runs after DOM is rendered
ngAfterViewInit(){
// get anchor element
let anchorEl = this.el.nativeElement.querySelector('a');
// assign color
if(anchorEl){
anchorEl.style.color = this.color;
}
}
}
Here is a working plunkr https://plnkr.co/edit/QSYWSeJaoUflP94Cy4Hm?p=preview
For example, you can change the ink colour in paper-tabs by changing --paper-tab-ink: var(--accent-color);. Is it possible to change the value of the CSS custom properties dynamically similar to how you can toggle a class or change the style in JS?
There are different ways to do this, but a simple answer is to use the Polymer.updateStyles() method after making your class changes.
For example, let's say your styles are:
<style>
.yellow x-example {
--light-primary-color: #fdd85f;
}
.red x-example {
--light-primary-color: red;
}
</style>
and you want to make the component use the styles in the .red class. You simply add it as you normally would in javascript, then be sure to also use this function to actually update it on the page.
<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
<x-example></x-example>
</div>
Yes, first get the object of your custom element. Then get the customStyle object. Add a style to that object. And then run element.updateStyles();
t.clickListener= function(e) {
var t = Polymer.dom(e).localTarget; //retarget if needed
t.customStyle['--the-color-etc'] = 'pink';
t.updateStyles(); // mandatory for the CSS variables shim
};
See the docs
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');