I work with angular 7 and I use mat-card and flex layout.
I want to place side by side in only row
and the three cards will be centered in the page ( meaning the position of the three card will be in the center )
like this :
I use this code :
.html
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
<mat-card class="example-card" *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{member.title}}</mat-card-title>
<mat-card-subtitle>{{member.subtitle}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image [src]="member.url" alt="Photo of {{member.title}}">
<mat-card-content>
<p>
{{member.content}}
</p>
</mat-card-content>
</mat-card>
</div>
.ts
#Component({
selector: 'app-card-view-demo',
templateUrl: './card-view-demo.component.html',
styleUrls: ['./card-view-demo.component.scss']
})
export class CardViewDemoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
members: {title: string, subtitle: string, content: string, url: string}[] = [
{title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
{title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
{title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
];
}
.css
.content {
padding: 16px;
}
.content > mat-card {
width: 200px;
}
but according to this code the cards are vertical and not in the same row.
and each card has 100 % size of the page.
can someone help me to do this by modifying the code of flex layout
Related
I want to make a responsive web site using Tailwind CSS and Next.js, but I can't apply my custom responsive utility classes. I added my custom breakpoints in tailwind.config.js.
Other media queries are working fine.
I designated w-[600px] in max-1280px and w-[400px] in max-768, but I can't apply max-768 and another media query only applied max-1280px.
import React from 'react';
import profile from '../../assets/images/me.jpg';
import Image from 'next/image';
import Link from 'next/link';
import { aboutContent } from '../../data/aboutContent';
const about = () => {
return (
<div className='animate-fade-in-up'>
<h1 className='text-5xl font-appleSemiBold laptopM:text-center laptopM:underline laptopM:mb-12 tablet:text-4xl'>
About Me
</h1>
<div className='border-2 w-40 ml-[142px] mb-12 laptopM:hidden'></div>
<div className='flex flex-row justify-between items-center font-appleRegular laptopM:flex-col laptopM:gap-10'>
<Image
className='w-[600px] tablet:w-[400px]'
src={profile}
alt='Picture of me'
/>
<div className='w-6/12 laptopM:w-[600px] tablet:w-[400px]'>
<div className='text-2xl mb-8 tablet:text-xl'>
<p>test</p>
<p>
test
</p>
</div>
</div>
</div>
<div className='font-regular'></div>
</div>
);
};
export default about;
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {
screens: {
mobileS: { max: '320px' },
mobileM: { max: '375px' },
mobileL: { max: '425px' },
tablet: { max: '768px' },
laptop: { max: '1024px' },
laptopM: { max: '1280px' },
laptopL: { max: '1440px' },
},
},
plugins: [],
};
I need to have each vuedraggable item to have different styling in the wrapper tag (for example based on the element's index) like so:
<div class="wrapper">
<div class="grid_item" style="grid-row: 1">
I am Item 1
</div>
<div class="grid_item" style="grid-row: 2">
I am Item 2
</div>
<div class="grid_item" style="grid-row: 3">
I am Item 3
</div>
</div>
I know this is a very simple example that doesn't really need the index but suppose a more complex scenario where it is necessary to have access to the index in the draggable component (not its child template).
Suppose the current component looks like this:
<template>
<div class="wrapper">
<draggable
:list="items"
class="grid_item"
item-key="name">
<template #item="{ element }">
I am {{ element.name }}
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
items: [
{
name: 'Item 1'
},
{
name: 'Item 2'
},
{
name: 'Item 3'
},
],
}
},
methods: {
rowForItem(index) {
return `grid-row: ${index + 1}`;
}
},
}
</script>
<style>
.wrapper {
display: grid;
}
.grid_item {
background-color: gray;
}
</style>
How can I make use of the rowForItem method here?
I have built an object of CSS that I've defined the CSS property name and value. The goal is to build out a form to manipulate the value and automatically update the CSS on the page visually for the user.
I have it all working except for an elegant way to actually style the item in real time.
Here is the link to example https://codepen.io/uncommonjoe/pen/KKXyzBp
This is the object I created that I'm working with
vm.card = [
{
class: "card",
properties: [
{
name: "background-color",
value: "#FFFFFF"
},
{
name: "border",
value: "1px solid #FFFFFF"
},
{
name: "border-radius",
value: "5px"
},
{
name: "box-shadow",
value: "0 0 26px rgb(0 0 0 / 20%)"
},
{
name: "margin",
value: "0"
},
{
name: "padding",
value: "0"
}
]
}
];
And in the HTML I'm using ng-repeat to build out form controls
<div ng-repeat="card in vm.card">
<b>{{card.class}}</b>
<div ng-repeat="object in card.properties">
<label>{{object.name}}</label>
<input type="text" ng-model="object.value" />
</div>
</div>
This is the example of the item. As you can see, that's not dynamic and reusable.
<div class="card" style="width: 18rem;"
ng-style="{
'background-color': vm.card[0].properties[0].value,
'border': vm.card[0].properties[1].value,
'border-radius': vm.card[0].properties[2].value,
'box-shadow': vm.card[0].properties[3].value,
'margin': vm.card[0].properties[4].value,
'padding': vm.card[0].properties[5].value,
}">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
I need a good way to do an ng-repeat so to speak in the ng-style and pull the name and define that as the CSS property and value as the value.
Define a styler function in your controller and then call it from ng-style:
vm.styler=function(props){
var styles={};
props.forEach(css=>{
styles[css.name]=css.value
})
return styles;
}
and in ng-style: ng-style="vm.styler(vm.cardObj[0].properties)"
The title almost says it all. But here I provided some examples and a sandbox for you to see what I'm talking about.
Here is a link to the sandbox that I created and added all dependencies.
As you can see in the first picture, my dropdown menu goes behind everything and part of it literally becomes hidden. It's there but not visible
And here is what a dropdown should look like:
I thought to myself that the problem might be because of the z-index. But the element has a z-index: 1000; style applied to it and you can see the applied styles and selected element in chrome inspect in the below picture. As you can see the element's full rectangle is highlighted in inspect but is not visible.
But there is a position: fixed; header with a dropdown menu inside of it which uses react-bootstrap dropdown as well. But it is shown perfectly and without any problems. I gave that header a static position and here is the result. The dropdown was still being shown perfectly.
I've been thinking and searching about this problem for weeks and still couldn't find a solution. Any help will be much appreciated and thank you in advance.
import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import { Dropdown } from "react-bootstrap";
function UsersAdmin() {
const users = [
{
id: 1,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 2,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 3,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
}
];
const columns = [
{
name: "language item",
selector: "id",
sortable: true,
width: "90px"
},
{
name: "language item",
selector: "first_name",
sortable: true
},
{
name: "language item",
selector: "last_name",
sortable: true
},
{
name: "language item",
selector: "email",
sortable: true,
grow: 1.5
},
{
name: "language item",
selector: "mobile",
sortable: true
},
{
name: "language item",
selector: "created_at",
sortable: true,
grow: 2
},
{
name: "language item",
cell: (row) => (
<div style={{ width: 50, height: 50 }}>
<img
src={`${process.env.REACT_APP_BASE_URL}/storage/${row.avatar}`}
style={{ width: "100%", borderRadius: "50%" }}
/>
</div>
),
width: "75px"
},
{
name: "language item",
cell: (row) => (
<Dropdown>
<Dropdown.Toggle size="sm" />
<Dropdown.Menu size="sm">
<Dropdown.Item>
<i className="fa fa-edit mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="mdi mdi-eye mr-1" /> {"language item"}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
),
width: "75px"
}
];
return (
<>
<div className="container-fluid">
<div className="p-3">
<h2>{"language item"}</h2>
</div>
<div className="card" style={{ width: "100%" }}>
<div className="card-body">
<DataTableExtensions exportHeaders columns={columns} data={users}>
<DataTable
columns={columns}
data={users}
pagination
defaultSortAsc={false}
defaultSortField="updated_at"
noHeader
/>
</DataTableExtensions>
</div>
</div>
</div>
</>
);
}
export default UsersAdmin;
it's not about z-index. Your selection is hiding because the container of your table has overflowY hidden:
.hkMDrI {
position: relative;
width: 100%;
border-radius: inherit;
overflow-x: auto;
overflow-y: hidden;
min-height: 0;
}
So you won't be able to see what is hide outside the height of that div.
Width your current html I don't think it has any solution unless you don't need scrolling with that table, which I doubt.
Changing the html I would place your .dropdown-menuoutside the scrolling div however you will need javaScriptto position the element the right place, under the arrow icon.
I have a Vuetify project. I'm using the template with a slot group.header, so far so good.
Now I want to use a <v-spacer> in this template. Its in a <v-sheet>.
When I use the <v-spacer></v-spacer> I expect the content on the same line. But it will be on the next line. How can I display the button after the spacing on the same line, user Vuetify's system?
codepen
https://codepen.io/h3ll/pen/VwWOxdJ?editors=1010
HTML
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th #click="toggle" colspan="12" class="ma-0 pa-0">
<v-sheet>
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].category }}
<v-spacer></v-spacer>
<v-btn x-small>I WANT TO BE ON THE RIGHT SIDE</v-btn>
</v-sheet>
</th>
</template>
</v-data-table>
javascript
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{ text: 'Category', value: 'category', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
},
...
],
}
},
})
Update
I can fix it with normal css like
<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="12">
<v-sheet>
<div #click="toggle" style="display: inline; width: 100vw">
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].folder }}
</div>
<div style="display: inline; float: right;">
<v-icon #click="deleteItem(item)">mdi-dots-vertical</v-icon>
</div>
</v-sheet>
</th>
</template>
```
But I wondering why Vuetify v-spacer is not working
v-spacer is basically just a div with the style flex-grow: 1. So to get this to work the parent container of the v-spacer needs to have display: flex.
In your case you can add this to v-sheet:
<v-sheet class="d-flex">
<!-- content -->
</v-sheet>