I have the following markup in angular2
<form [formGroup]="createPasswordForm" (ngSubmit)="onClickCreatePassword(createPassword)">
how do I select this element in css
I tried the following but it does not seem to work
form[\[formGroup\]="createPasswordForm"]
and
form[formGroup="createPasswordForm"]
You are used like this:-
<form id="createPasswordForm" [formGroup]="createPasswordForm" (ngSubmit)="onClickCreatePassword(createPassword)">
component.css:-
#createPasswordForm{
// Write a css code here
}
[formGroup] is not a "real" attribute of the html this is the property of formGroup.
Related
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
My Angular 2 Dart application has many nested components. If a certain property of one of my components is set to true, a popup is shown.
If this popup is shown I want to add a class to the document body.
Pseudo code example:
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
Simple reason: If the popup component is displayed I want to disable body scrolling (overflow-x:hidden;). The popup component is shown if the property bool show_popup within popup_component.dart is set to true.
Unfortunatly in CSS - as far as i know - there is no selector to check this (Is there a CSS parent selector?) - otherwise I would say something like
body:has(.my_popup)
in the main.css file or something similar.
How can I achieve the desired result?
There are two way.
You can use
#HostBinding('class.someclass') bool isSomeClass = true;
in the root component if it has
selector: 'body'
or
document.querySelector('body').classes.add('someClass');
You can use :host-context(...) to style a component depending on a selector matching a parent
:host-context(body.someClass) {
background-color: red;
}
will make the background color red when the body element has class="someClass" set.
I have this label within website:
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix">
for example want to add the rule to be met in this condition is:
visibility: hidden;
as I have to put in the CSS file?
Thank you for your help
First of all it seems that its not a "Label"
and if you want to hide element, you can do so by using the display property.
.exodus-content-block {
display:none;
}
If there are other elements with same class then you can narrow down your rule by using the whole class attribute value as below..
.exodus-nav-left-right.exodus-content-block.exodus-content-block-compact.exodus-clearfix {
display:none;
}
you can use the inline styling.
example
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix" style="visibility:hidden">
Or you can write as css class and add in the code
<style>.hiddenvis{ visibility:hidden}</style>
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix hiddenvis "/>
but you got to make sure other classes used here do not override your hidden functionality
What am I doing wrong with applying CSS to my table (Webpart: WebPartWPQ6) in SharePoint?
I have this script editor CSS (note the Font-size is just trying to see in an instant if what I apply works or not):
<style type="text/css">
#WebPartTitleWPQ6 .ms-viewheadertr
{
font-size: 100px !important;
}
</style>
I've tried replacing ms-viewheartr with diidSort16RequestID, ms-headerSortTitleLink, ms-viewheadertr .ms-vhltr, ms-vhltrm, ms-vh-div. But none of them seem to be working.
I'm getting the webpart name from inspecting the element:
<div id="MSOZoneCell_WebPartWPQ6" class="ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div webpartid="69f4fe83-8a06-4eca-bbb2-fb143cdc2859" haspers="false" id="WebPartWPQ6"
and I'm trying to get the name of the header from:
There isn't any element with an id of WebPartTitleWPQ6 in the HTML you posted. The closest thing is the element with the id WebPartWPQ6.
Try using a CSS selector of #WebPartWPQ6 instead of #WebPartTitleWPQ6.
I different CSS styles, one of which is:
#layoutsectiondiv{
border: 2px dashed #000000;
padding: 1px;
left: 0px;
}
I have a aspx page:
<div id="testDiv" runat="server">
</div>
If it was regular HTML, I would set the style of a div by doing a
<div id="layoutsectiondiv">
</div>
At runtime (in code behind), I need to dynamically assign different styles to the DIV. How would I do it?
Use the class property and change your css styles to use class selectors instead of id selectors. For example
.layoutsectiondiv{}
<div id="testDiv" class="layoutsectiondiv">
</div>
Edit
Make your class only so that you apply it on the specific divs you want. don't reuse your classes. This should be easy since your css is already tied to a specific ID, just put that class on that element.
If you use that class on many types of elements what you suggested would work fine.
Josh is right, you should use class instead of id.
for your question :
At runtime (in code behind), I need to
dynamically assign different styles to
the DIV. How would I do it?
try this :
// layoutsectiondiv is defined as class : .layoutsectiondiv{}
testDiv.Attributes["class"] = "layoutsectiondiv";
So you could use a css id selector this way.
#layoutsectiondiv { color: red }
with the following html
<div id="layoutsectiondiv">
</div>
Or a css class html selector like this.
.layoutsectiondiv { color: blue }
with the following html
<div class="layoutsectiondiv">
</div>
If you want to control the style of a particular .net control, ie one that has the runat="server" attribute, then as we know .net will 'mangle' the id to ensure its unique.
In this case in our code we can use FindControl to access the div and change its style
<div id="testDiv" runat="server">
</div>
ie.
HtmlGenericControl testDiv =
(HtmlGenericControl)Page.FindControl("testDiv");
// to hide
testDiv.Attributes.Add("style", "display: none"); // OR
testDiv.Attributes["style"] = "display: none";
// to show
testDiv.Attributes.Add("style", "display: block"); // OR
testDiv.Attributes["style"] = "display: block";
// or to add a class
testDiv.Attributes.Add("class", "MyCssClassName"); // OR
testDiv.Attributes["class"] = "MyCssClassName";
Here is a good explanation on the difference between css id and class - CSS: div id VS. div class.
And here for How to edit CSS style of a div using C# in .NET