Angular creates a div with a class container and put inside my component html. Is it possible to change that class to a container-fluid ? I read that angular use encapsulation but im not sure where can I find that div and if its even possible to change it's class.
you can find the html file who has that div in src/app/app.component.html check it and change the class that you want. hope that help
Related
I have a problem, a button that belongs to an InfoWindow component. The button isn't created in the HTML part of the code but is called whenever the card component is open. I use this InfoCard in two places of the application, and in each component, I change the position of the button using ::ng-deep, because without it the changes won't be applied. The problem is whenever I change from one page to another, the component child1 inherits the child2 CSS of the button, and the same way when I check child1 first. I thought about adding a class to each button and changing in the CSS the call of classes .class1.button and .class2.button, but the problem is the button isn't displayed until I click in the showInfo button to display the card, so in typescript the class is displayed none, and I can't add a class to a class with display none.
Any help on how I can solve that?
The problem is rather difficult to understand for me given your description. However, you might take a look at the following docs. E.g. :host-context can be used to differentiate style application based on the context, e.g. the presence of some class in some ancestor component - assuming you apply some StyleEncapsulation.
I saw not editable class styles on the site on chat pane.
And the classes themselves were dynamically changing.
How to make same?
Materialize's Datepicke rmakes use of modal (popup).
http://materializecss.com/forms.html#date-picker
Is there a way to use Materialize's Datepicker, without the modal (popup), like embed it to the webpage instead? If possible how can I achieve that?
You can probably do couple of things, such as:
1) Set the container to match the element you want datepicker to be embedded into. Materialize Datepicker has that option. See the docs.
2) Override .modal-overlay class and set its display property to none
3) Override .modal class by setting its position to relative and margin to 0
4) Override .datepicker class by setting visibility to hidden and position to fixed in order to hide the input element
The rest is up to you. But it's all about playing with CSS
EDIT: Also you will probably need to make sure that Datepicker is always open
i have a Angular 2 project that uses Routes and differents components. one of this components is a login page that don't show any sidebar or footer... So, i need to put ONLY on this page a background (that covers all the body).
I try to use :host {..} but don't work.
How can access to the body background property on this component?
This component is on the same level that app.component.
app.component.html has the and the login component renders here.
Can you help me?
Not sure why you are applying backgorund. If you just want to hide side bar and footer for your login page then you can simply hide them based on your active route using hidden attribute or ngIf directive. Here the refernece for ngIf
It really depends on your login.component.html if :host will work and you didn't show it. You can wrap your login.component.html in a div container and add a class to it for its background color. This one works for me.
<div class="my-container>
<!--your content --!>
</div>
Here's a plunkr for the demo
I want to create a textbox to make a loginform. But there is alot of css on it that i don't want to use. Im also using bootstrap so there is a lot of standard css classes and stuff that the textbox inherits. How do i make it not inherit any other classes or can i make it to be reset so that it doesn't have any css classes except the ones i tell i to?!
One of the problems i have is that the textarea looks like it is sunk into the background i rather want it so look flat.
in your CSS
input[type="text"]{border:none; box-shadow:none; width:auto}
you can change any of these properties at will, or apply to all input elements by deleting the [text] part