I am having a problem with the spacing of expansionpanels inside a flex row
I have multiple Mat-Expansion-Panel inside an ngFor inside there are multiple items, and every panel has different item length.
Now when I expand one panel, the one beside it will also expand to the same height but without showing the item (since its not really expanded)
I have created a stackblitz: https://stackblitz.com/edit/mat-expansion-panel-x8qz9z
Since my panellist is a seperate component and is used multiple times with different layout, do I really need to make 2 seperate columns inside the *ngFor to make this work?
Edit1: I have tried height:max-content on the mat-expansion-panel but the problem is panel 3 should move up under panel one.
The same problem exists for align-items:baseline; on the container
Kind regards
It can only be done with 2 separate columns. You can split your array into two columns, or however many you may need like this:
columns = [
this.panels.slice(0, Math.ceil(this.panels.length / 2)),
this.panels.slice(Math.ceil(this.panels.length / 2))
];
You can use this array in your template:
<div class="panel-container">
<div class="panel-column" *ngFor="let columnPanels of columns">
<mat-expansion-panel class="panel" *ngFor="let panel of columnPanels">
<mat-expansion-panel-header>
{{panel.name}}
</mat-expansion-panel-header>
<div *ngFor="let item of panel.items">{{item}}</div>
</mat-expansion-panel>
</div>
</div>
And update your css:
.panel-container {
display:flex;
flex-direction:row;
}
.panel-column {
flex: 1;
}
.panel {
margin: 10px;
height: max-content;
}
stack
Related
I have a website I am trying to do something like this, when I click on 1, I want the background of this element to change to white and when I click on the second one the background of the first one will disappear and pass to the next one...I have been trying to do this for a long time help me I don't know how to do it
<div class="oval">1</div>
<div class="oval">2</div>
<div class="oval">3</div>
When we need make "something" exclusive we use one unique variable
selectedIndex:number=-1
If you want not unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=2">
3
</div>
If you want unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=selectedIndex==0?-1:0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=selectedIndex==1?-1:1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=selectedIndex==2?-1:2">
3
</div>
NOTE: I use [class.selected], so we use a .css
.selected{
background:red;
}
You can use style.background or style.background-color using (condition)?value:null, e.g., for the first div
[style.background]="selectedIndex==0?'red':null
Like #Kwright02's comment you can do it with css:
.myclass:focus {
background-color: green;
}
But important: The element must be focusable. So a div isn't, a button is as example.
Second way (add a click handler and change the background directly):
// HTML
<div (click)="onClick($event)">test</div>
// Code
onClick(event: any) {
event.target.style["background-color"] = "green";
}
Note: This is not the way to go in Angular. Here use property binding and bind a style to a condition as example.
Instead of add a click listener to each control you can use Angular's HostListener like this:
#HostListener("document:click", ["$event"])
onAllClick(event: any) {
event.target.style["background-color"] = "green";
}
How can align items in row/column depending on condition in *ngFor.
If the input type is textarea, then it should be in the next line otherwise on the same line.
html input from json - Stackblitz Demo
what you are trying to do is rather simple, you just need to add an extra class in the div you are iterating through with *ngFor as in:
<div
*ngFor="let prop of objectProps"
[ngClass]="{ 'same-line': prop.type !== 'textarea' }"
>
Then you can use that class to set the element's display to inline-block so that it does not go in the next line as in:
.same-line {
display: inline-block;
width: 50%;
}
(note that I also needed to specify the width as that needs to be known here)
This is the result:
And I you can also see this working in the following fork of your stackblitz demo:
https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts
I have to make text wrap convert into into two line and ellipse will add if the text is more than two line.
Currently it's wrap in multiple line and view look so weird.
What i have done so far in css:
<div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
<a class="item item-thumbnail-left" href="#">
<img src="http:{{new.thumbnail}}">
<h2>{{new.summary}}</h2>
<p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}} {{new.date |
date:'shortTime'}}</p>
</a>
</div>
This is work perfectly when text length is short but i want to make it consistent in two line and rest of part is append with dot(...).
Any help would highly appreciate.
So you cannot accomplish this using only CSS because you must use white-space: nowrap; to be able to use text-overflow: elipsis; and nowrap will not let the words wrap down multiple lines.
Here is a similar question with a Jquery solutions: CSS word ellipsis ('...') after one or two lines
Here is a page dedicated to different version of text-overflow and the different ways to handle it: http://dotdotdot.frebsite.nl/
You are going to need JQuery to do this, but luckily you gain a lot of control and may find a better visual design rather than the ellipsis.
Of course, apply any styles to the parent elements holding the text.
e.g.
<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}} {{new.date | date:'shortTime'}}</p>
// Jquery
if ($('.date').height() > 50) {
var words = $('.date').html().split(/\s+/);
words.push('...');
do {
words.splice(-2, 1);
$('.date').html( words.join(' ') );
} while($('.date').height() > 50);
}
HTML:
<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">
Popover on left
Javascript:
$('*[data-id]').mouseenter(function(event) {
var e=$(this);
var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';
e.popover({html:true,placement:'bottom', animation: false,
delay: { show: 1500, hide: 100 }, content: content}).popover('show')
});
It works fine but only if string in content contains spaces. If theres no spaces text overlaps with second div.
JS Fiddle:
http://jsfiddle.net/9Nt48/
How i can fix this?
This is the problem with continuous text, CSS will automatically place it in next line for you if it seems to overlap with the other divs but it doesn't have much of a choice when you don't give a space, this is because it doesn't know when to break, so you can specify it like:
.popover-content {
word-wrap:break-word;
}
Since your columns already have the width specified, if the text inside the div exceeds it, break it at that point.
DEMO
This is because your markup is wrong. A row in Bootstrap is what nests your columns. You have nested columns inside other columns, which is not correct.
<div class="row">
<div class="col-xs-12">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
</div>
</div>
You also only need to use row and col-x-x classes is if you want to use columns in the tooltip. So you don't really have to use them if you are displaying simple text.
Finally, if you want multiple rows of text, just a p element to split the text.
Caveat: I'm not actually sure you can use the grid inside tooltips. So you might be better off using simple text without columns...
I have a div with few elements , my label and textbox inside a div are not well aligned , You can see the screenshot ..
Any idea to align these legal name and business name and textbox , so all the textboxes should start from the same point
thanks
Set width for your labels and inputs:
.the-label {
width: 160px;
}
.the-input {
width: 220px;
}
Here's one way you can do it:
http://jsfiddle.net/FmKfP/
You could align them using an invisible table.
<table border="0">
<tr><td>Legal Name:</td><td><input type="text"></td></tr>
<tr><td>Business Name:</td><td><input type="text"></td></tr>
</table>
You'll have to ask yourself which is worse: using a table or using enough mark-up that it looks like a table but with spans/divs instead of trs/tds. I think tables are fine in this instance (if you've worked with relational databases, it's not uncommon to have lots of tables with only 2 columns), others will assure you that it is evil.
You can use a width on your label elements as already suggested or you can use slightly less evil CSS tables.
div.pseudo-row { display: table-row }
/* input might need to go in a container and have the container set to table-cell instead */
div.pseudo-row label, div.pseudo-row input { display: table-cell }
<div class="pseudo-row">
<label for="first-item">First item</label>
<input type="text" id="first-item" />
</div>
<div class="pseudo-row">
<label for="second-item">Second item</label>
<input type="text" id="second-item" />
</div>
http://www.vanseodesign.com/css/tables/
For the record, I would just use tables in this instance and save the CSS table display properties for another day.