I am trying to set different background color for different resolution mode using flexlayout.
its not working, below is my code
app.component.html
<div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
<div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
first-section
</div>
<div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
second-section
</div>
</div>
app.component.css
.xsBGColor{
background-color:red;
}
.mdBGColor{
background-color:blue;
}
some thing i missed here but i cant find, please suggest what i missed in my code.
You should use ngClass instead of fxFlex
ngClass.xs="xsBGColor"
Ref: https://github.com/angular/flex-layout/wiki/ngClass-API
Related
I've a problem with the z-index on IE 11, a dropdown appears under other element in a pop up message. Let me show you a little sketch captured from the page.
Pop-up sample
I reasearch for a lot of possibles solutions but any doesn't works for me. Also I am using PrimeFaces with Angular 2. I found this solution to fix this kind of problem in IE:
<div style="position: relative; z-index: 3000">
<div style="position: absolute; z-index: 1000">
[ ... ] <!-- The drop down menu will be here -->
</div>
</div>
And I tried to use this way with my code, but doesn't work. :(
<p-dialog header="Assign claim {{ vm.request.id }}" [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" >
<div class="ui-g form-group">
<div style="z-index: 3000">
<div class="ui-g-6">
<h4>Lorem ipsum</h4>
{{vm.request.responsible}}
</div>
<div class="ui-g-6">
<h4>et dolo</h4>
<div style="z-index: 1000"> <!-- This dropdown menu should to appear over the form, not behind :( -->
<p-dropdown class="popup-dropdown" [(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false" (onChange)="changeAssignedUserId($event.value)">
</p-dropdown>
</div>
</div>
<div class="ui-g ui-g-12"></div>
</div>
</div>
<!-- More awesome code! -->
Can anybody help me?
Thanks in advance to everybody.
Ashia.
Because sadly, you cannot redefine z-index for a child component with a parent who already has z-index defined. The child inherit the z-index from it parent when it exist.
You can use the z-index: -1; hack, but it's not really a stable and advisable solution...
The best approach is to define z-index for your “brother” component (both .ui-g-6 for example).
Thanks to everybody, specially to #MadDev, finally I solved the problem following your answer, I used the following code
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
Ashia.
I think that your problem comes from PrimeNG. Note that you are using a p-dialog, with a p-dropdown component inside, such the PrimeNG documentation explains:
Overlays Inside
When dialog includes other components with overlays such as dropdown, the
overlay part cannot exceed dialog boundaries due to overflow. In order to
solve this, you can either append the overlay to the body or allow overflow
in dialog.
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
</p-dialog>
Then your code should be:
<p-dialog header="Assign claim {{ vm.request.id }}"
[(visible)]="vm.isDisplayed" [width]="700" [modal]="true"
[contentStyle]="{'overflow':'visible'}>
<div class="ui-g form-group">
<div style="z-index: 3000">
<div class="ui-g-6">
<h4>Lorem ipsum</h4>
{{vm.request.responsible}}
</div>
<div class="ui-g-6">
<h4>et dolo</h4>
<div style="z-index: 1000">
<p-dropdown class="popup-dropdown" appendTo="body"
[(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false"
(onChange)="changeAssignedUserId($event.value)">
</p-dropdown>
</div>
</div>
<div class="ui-g ui-g-12"></div>
</div>
</div>
This should fix your problem.
;-)
I'm trying to create a form with Angular2 Material and bootstrap grid,
my HTML looks like this:
<div class="row">
<div class="col-md-6 marign-top-10 margin-bottom-10">
<md-input-container class="full-width">
<input
mdInput
type="text"
formControlName="postal"
placeholder="Postal">
</md-input-container>
</div>
<div class="col-md-6 marign-top-10 margin-bottom-10">
<div class="full-width">
<md-select class="full-width" placeholder="Country" formControlName="country_id">
<md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
</md-select>
</div>
</div>
</div>
my full-width css class just set width:100%.
the problem is that the inputs are not in the same line as it should be
here is a few screenshots:(my application is right to left language so ignore the text direction )
it is a css problem you can add this to your component stylesheet:
.mat-select{
margin-top:10px;
}
Play with the value maybe is greater than 10 or lower
It a problem with md-select styles, I had trouble in project too, so my solution is:
CSS
md-select {
min-height: 30px; // or any value that equal md-input-container>input height
}
JSFiddle example
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
Is there a way I could edit how far an alert could stretch across the page, so it doesn't go all the way across?
Here's an example of my alerts:
<div class="alert alert-success">Your first number was correct.</div>
Using some CSS
.alert {
width:40%;
}
Example
http://www.bootply.com/96921
The example above makes the alert width 40% of the container, or in this case the screen.
You can also set a fixed width.
.alert {
width:300px;
}
if you want that the alert is juste the size of the inner text :
.alert {
display:inline-block;
}
Placing it in a row and offsetting its col did it for me.
<div class="row">
<div class="alert alert-danger col-md-4 col-md-offset-4" align="center">
</div>
</div>
I think it would work to just take the code from the question
<div class="alert alert-success">
and add one of the column classes like this
<div class="alert alert-success col-md-3">
Something like that worked for me anyhow, my exact code was
<div class="alert alert-info alert-dismissible col-md-3" role="alert">
Made a nice small alert out of it just a bit bigger than a button.
In newer versions of Bootstrap (v4 and v5), you can use this simple width modifier (w-25, w-50, w-75):
<div class="alert alert-danger w-50" role="alert">
You have been altered, dangerously!
</div>
https://getbootstrap.com/docs/4.5/utilities/sizing/#relative-to-the-parent
https://getbootstrap.com/docs/5.0/utilities/sizing/
If your alert is part of a .row then setting its class to include .col-lg-12 will force it to span across its container.
If you are using Bootstrap 4.0 or above your can make use of d-inline-block.
Here is an example how to use it:
<div class="alert alert-success d-inline-block" role="alert">
This is a success alert—check it out!
</div>
In bootstrap's documentation you can read more about the display property.
Simply use a span instead of a div. It is again the same "inline vs block elements" dilemma.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info">div alert</div>
<span class="alert alert-info">span alert</span>
Available since, at least, bootstrap v3.
I´m having a problem with divs when I´m trying to apply background-color to #header for example so it will cover all of the header.
it dosen't show any changes that I made to the css of the #header, #maincontainer and more can you please help me I have tried so many things and nothings seems to work.
Here is the Html sample :
<div id="wrapper">
<div class="container">
<div class="span-24 showgrid">
<div id="header">
<div id="logo"><img src="logo.png" alt="Iris logo"></div>
<div id="slogan">
<h1>Íris</h1>
<h2>Ættleiðingartengd fræðsla</h2>
</div>
<div id="searchbar"><input class="text" onfocus="this.value=''" type="text" name="searchbar" value="Leita.."></div>
</div><!-- end .header -->
Here is the rest of the HTML if you prefer to see to all :
http://pastebin.com/8AyENrdn
It's hard to tell from what you have described and no CSS - Try this
#header {overflow:hidden;background:#eee;}