I have tried everything I can think of to get this to work. I modified a different stackblitz to add this as a test:
https://stackblitz.com/edit/angular-acdxje-8bz7tq?file=app%2Ftable-basic-example.html,app%2Ftable-basic-example.css,styles.css,app%2Ftable-basic-example.ts
Code I am using:
<mat-expansion-panel [expanded]="Expand" style="width: 80%; text-align: center">
<mat-expansion-panel-header>
<mat-panel-title style="text-align: center"> Test </mat-panel-title>
</mat-expansion-panel-header>
</mat-expansion-panel>
Any help would be appreciated!
replace text-align: center with margin: 0 auto
I just quickly inspected the code I saw that the header was using flex
mat-expansion-panel-header .mat-content {
justify-content: center;
}
Related
I have a mat-list in an Angular component like below (food-list.component.html)
<mat-list id="site-list">
<ng-container *cdkVirtualFor="let food of foods">
<mat-list-item id="food-{{food.id}}">
<mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>
<p matLine [ngStyle]="{width: foodLabelWidth} class="overflowText"><small>{{food.label}}</small></p>
<p matLine [ngStyle]="{width: foodLabelWidth} class="overflowText"><small>{{food.type}}</small></p>
</mat-list-item>
</ng-container>
</mat-list>
And in CSS file (food-list.component.scss)
p.overflowText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
As example in a desktop view mat list item width 100px and, MatIconWidth is 5px. and in mobile view mat list item width 50px and, MatIconWidth is 5px. I want to set text overflow width according to the space that left.
for example, in food-list.component.ts I want to do something like this.
ngOnInit(): void {
this.foodLabelWidth= matListItemWidth - MatIconWidth;
}
to make it happen I want to get DOM element width of
<mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>
Which lies inside a NgFor loop. Is there a way to achieve this?
So I could use flex design to make it work !!
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
in html file
<mat-list id="site-list">
<ng-container *cdkVirtualFor="let food of foods">
<mat-list-item id="food-{{food.id}}">
<div class="flex-row w-100">
<div class="flex-row">
<mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>
</div>
<div class="food-title">
<p matLine class="overflowText"><small>{{food.label}}</small></p>
<p matLine class="overflowText"><small>{{food.type}}</small></p>
</div>
</div>
</mat-list-item>
</ng-container>
</mat-list>
scss file
::ng-deep .cdk-virtual-scroll-content-wrapper {
max-width: 100%
}
.flex-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.food-title {
flex-grow: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
Basically, I have this user-customisable CSS-grid (node: width and height don't have limits, and I do not want it to have such) and it can be really really wide and/or really really high, and if that happens, the scrolling just stops somewhere and the elements not in the middle of the grid just get made inaccessible.
This is what I have at the moment and I got zero idea how to make it scroll to all parts of the grid
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center
}
<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
There are a lot more tiles that get added via .appendChild().
Imagine like a few thousand more tiles here.
-->
</div>
<!-- Irrelevant Minesweeper stuff -->
<button onclick="help()">Stuck?</button>
<p id="minecount" style="display:inline"></p>
</div>
PS: Before anyone links me to this, I have tried to understand it and it hasn't worked, so I am asking more specifically. (also that as well)
EDIT: Thank you Teemu, I had to add flex-wrap: wrap to the body ruleset
I've got two images that need to be aligned on either side of the title, preferable on the edges of the page. I tried to use position relative but it's not responsive to other screen sizes.
Can someone show me an efficient way to do this, please?
Currently its like this, but i want the two images to be on either side of the title.
title{
width: 100%;
}
.web{
font-size: 120px;
}
.js{
height: 230px;
width: 240px;
}
.css{
height: 230px;
width: 440px;
}
<div class="intro py-3 bg-white text-center">
<img class="js" src="images/js-flat.png" alt="js">
<div class="title">
<h2 class="web text-primary display-3 my-4">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
</div>
never-mind, i fixed it with:
.intro {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center
}
You can use display:flex property in your parent div. I did some changes of your html and css codes below.
Here is the html part. I deleted the div that has a title class because all elements that are needed to be align should be seperated each other if you use display:flex
Here is the HTML and CSS codes:
.intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center
}
.web{
font-size: 120px;
}
.js{
width: 240px;
}
.css{
width: 240px;
}
<div class="intro bg-white ">
<img class="js" src="images/js-flat.png" alt="js">
<h2 class="web text-primary">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
When you use display:flex all items are aligned as horizontally. But we want to align them vertically. So we need to use flex-direction:column (its default is row). To align these items center, we also need align-items because this is used to align in cross axis which is perpendicular to the main axis.
Codepen: you can check it here
I am trying to send a mail via nodemailer with some texts and images,
it all worked fine until i had to center an image and then i sterted to run into some weird bugs with the stylings, i have 2 examples that just doesn't work :
the following code is my wrapper, and when it sents the part of 'flex-direction: column' is being ommited and in the devtools i see only the 'direction: ltr; display: flex;' as the inline style :
<div style='direction: ltr; display: flex; flex-direction: column;'></div>
the following code is an image i tried to center ( after the flex part didnt work as expected ) but this time the part of 'transform' is being ommited and i only get the margin :
<img src="cid:image2#cid" style='margin-left: 50%; transform: translate(-50%, 0)'/>
maybe someone have an idea what am i missing here ?
thanks
Here 2 option in 1 snippet, I would recommand to always use table in email structure.
PS: I was adding max-width and height to image to show it well on my demo. You can remove that.
table {
width:100%;
}
tbody {
width:100%;
}
tr {
width:100%;
display: flex;
justify-content: center;
}
<!------------------ 1st solution -------------------->
<div style='direction: ltr; display: flex; flex-direction: column;'>
<img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" style='margin:auto; height:auto; max-width:120px;'/>
</div>
<!------------------ 2nd solution -------------------->
<table>
<tbody>
<tr>
<td style="padding: 20px;">
<img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" style="height:auto; max-width:120px;" />
<div style="padding-top: 30px;">TEST TEXT #1</div>
</td>
</tr>
</tbody>
</table>
I need to create a lattice/grid overlay for a photo editor UI. The lines of the grid itself should be white, and "interconnected" - eg they don't visibly overlap each other. However, the entire grid needs to either have a border of 1px, or a shadow.
Here's an example:
Any ideas how this can be achieved? Ideally I'd like a solution I can position absolutely over the image itself.
Although it probably makes little difference, this is for a React Native project.
Hope this helps you out. I have setup a base using grid layout. Please check if it is fine.
.grid-container {
display: flex;
padding: 10px;
flex-direction: row;
flex-wrap: wrap;
width: 100px;
}
.grid-item {
font-size: 30px;
text-align: center;
box-shadow: inset 10px -10px 15px 0 rgba(0,0,0,.2);
flex: 0 0 30%;
margin-bottom: 3%;
margin-right: 3%;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Probably you should use something like react-native-shadow package.
You can achieve shadow on android only via elevation style attribute, which does not give an opportunity to control shadow offset and radius.