I have a question similar to this one Flexbox - two fixed width columns, one flexible
But that one is about doing it using just Flexbox. I'm trying to use AngularJS Material. I want my left and right divs to be a fixed 28px width, and the center div to flex.
Something like this:
<div layout="row" layout-margin>
<!-- Alphabet - First Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<!-- Alphabet - Second Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....
Try this
<div layout="row" layout-margin>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
Related
I'm trying to use bootstrap 5 grid with angular material component mat-list but it's not working.
I want the text of the 2 field to use 12 columns on small device.
I have made a test using div and I get the right result but when I try to use boostrap container/row and col-X class with the mat-list it's not working.
Using div
<div *ngIf="dto">
<div class="container" >
<div class="row pb-2" >
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
<mat-divider></mat-divider>
<div class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
<mat-divider></mat-divider>
</div>
</div>
With angular material mat-list
<mat-list role="list" class="container" *ngIf="dto">
<mat-list-item role="listitem" class="row pb-2">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem" class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
Edit:
I added a demo code in stackblitz
stackblitz
When material renders the elements for mat list, an additional div element gets added between mat-list-item and the content, the rendered structure looks like this
<mat-list-item class="mat-list-item" role="listitem" class="row pb-2 w-100">
<div class="mat-list-item-content">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
The col elements are not the direct child of the row element, which is why the flex properties do not work
To fix this wrap the spans with a div with a class row
<mat-list role="list" class="container-fluid">
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
I want some gaps between my cards horizontally. But when I am adding gx-5 bootstrap 5 class, it's not taking any gap horizontally. here is my code below.
<div className="container">
<div className="row gx-5">
{myProducts.map((product) => (
<div
key={product._id}
class="card col-sm-12 col-md-4 "
style={{ boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px" }}
>
<img class="card-img-top img-fluid" src={product.image} alt="" />
<div class="card-body">
<h5 class="card-title">{product.name}</h5>
<p class="card-text">{product.description}</p>
</div>
</div>
))}
</div>
</div>
Is anyone there to help me, please?
Try this card snippet out:
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="..." alt="..." />
<div class="card-body">
<h5 class="card-title">Product</h5>
<p class="card-text">Product</p>
</div>
</div>
</div>
Explanation:
I just nested a new card div inside the column because card class affects how Boostrap manages the gutters.
A working example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row gx-5">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
</div>
</div>
Note: I converted the code snippet into plain HTML please consider converting it back to its original state without changing the classes.
I have freshly implemented masonry on my website(https://mypleaks.com) along bootstrap 5 and angular 13.
I have referred example from https://getbootstrap.com/docs/5.1/examples/masonry/ and added <script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
I have created cards dynamically like below :
<div class="container-lg content-container mt-lg-5 pr-lg-3 pl-lg-3 pt-lg-2 mt-3 p-0">
<div class="row" data-masonry='{"percentPosition": true }' style="position: relative; height: 1068px;">
<div class="col-sm-6 col-lg-4 mb-4" *ngFor="let content of contentList">
<div class="card" [class.remove-card-border]="content.contentType === advertisement">
<img *ngIf="content.attachments" [src]="content.attachments[0].identifier" class="card-img-top">
<div *ngIf="content.contentType != advertisement" class="card-body">
<h5 class="card-title">{{ content.title }}</h5>
<p class="card-text">{{ content.contentText }} <a [href]="content.externalUrl" class="text-nowrap" target="_blank">read more</a></p>
<div class="btn-toolbar d-flex justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3 input-group" role="group" aria-label="First group" ngbTooltip="good enough, people should know">
<button type="button" [disabled]="evaluationClicked" class="btn btn-success" placement="top"
(click)="upVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
<div class="input-group-prepend">
<div class="input-group-text">{{content.promoteCount}}</div>
</div>
</div>
<div class="btn-group ml-3 input-group" role="group" aria-label="Second group" ngbTooltip="fake or not good enough">
<div class="input-group-prepend">
<div class="input-group-text">{{content.rejectCount}}</div>
</div>
<button type="button" [disabled]="evaluationClicked" class="btn btn-danger" placement="top"
(click)="downVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-down fa-flip-horizontal" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div *ngIf="content.contentType === advertisement" class="d-flex justify-content-center">
<app-google-ads></app-google-ads>
</div>
</div>
</div>
</div>
</div>
Somehow, Style not updating on myPleaks similar to bootstrap example, Refer below snippets
bootstrap example
Thanks in advance for any help.
Instead using masonry-layout directly, I used ngx-masonry. Following are the package.json dependencies. And refer the documentation here
"masonry-layout": "^4.2.2",
"ngx-masonry": "^13.0.0"
Add following modules in app.module.ts
Wrap dynamic code in tag <ngx-masonry [options]="myOptions"> and add following config in the component implementation.
public myOptions: NgxMasonryOptions = {
gutter: 10};
I am developing an application with IONIC 4 for android and IOS.
I add a side menu (ion-menu), it works perfectly on android.
But in IOS it is giving me problems, the menu opens perfectly. But when I want to close the menu. Graphically the menu closes, but when I try to interact with the application, only the options within the side menu are activated.
Only the side menu items are useful, the rest of the application is canceled.
This is the process.
Main page normally:
I open the side menu:
I close the menu:
All this options gets blocked:
But this options still are activated, even though the menu has been hidden.
This only happen in IOS, my specifications:
My code:
<ion-menu side="start" content-id="main-content">
<ion-header class="headermenu">
<div class="spacioemenuleft">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
<img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;" src="{{pictureusuariomenu}}" >
</div> </div> </div>
</div>
<div class="spacioemenuright">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div class="textsaldo2" [innerHTML]="fullname"></div>
<div class="bloque">
<div style="float:left; width:70%; height:100%" class="textsaldo2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
PIN: {{pinusuario}}
</div> </div> </div>
</div>
<div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()">
<img alt="logo" style="width:100%; height:100%" src="assets/imgs/compartir-b.png" >
</div>
</div>
<span class="error ion-padding" style="color:white; font-weight:bold; margin-top:1em; padding-top:0em;" *ngIf="registrado">
PIN COPIADO!!!
</span>
</div>
</div>
</div>
</ion-header>
<ion-content >
<div class="ion-padding">
<div class="espacio2 margenboton" routerLink="/recargarsaldo">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
Recargar Saldo
</div> </div> </div>
</div>
<ion-list>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/perfil.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mi perfil
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/notificaciones">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11notificaciones.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Notificaciones
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/6dolares.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mis retiros
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11historial.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Historial
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/contact5.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Contáctanos
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;">
<img alt="logo" style="width:2.7vh; height:2.6vh;" src="assets/imgs/7cerrar.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;" (click)="cerrarsession();" >
Cerrar sesión
</div> </div> </div>
</div>
</ion-item>
</ion-list>
</div>
<div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;" >
<div style="float:left; width:40%; height:100%;" >
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:right;">
<p class="textblue2" style="font-weight:bold;">En alianza con:</p>
</div> </div> </div>
</div>
<div style="float:left; width:60%; height:100%; padding:0.1em; padding-top: 0.6em;" >
<img alt="logo" style="width:80%; height:auto" src="assets/imgs/Grupo517.png" >
</div>
</div> </div> </div>
</div>
</ion-content>
</ion-menu>
Any ideas?
<IonContent>
... other page components
{ authenticated ? <Menu/> : null }
</IonContent>
or what i have done in my example is not even render the router code that contains the menu when the user isn't authenticated
if (!authInfo || !authInfo.initialized) {
return (
<IonApp>
<IonLoading isOpen={true} />
</IonApp>
);
} else {
return (
<IonApp>
<>
{authInfo?.loggedIn === true ? (
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/:name" component={Page} exact />
<Route path="/tabs" component={TabRootPage} />
<Redirect from="/" to="/tabs" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
) : (
<IonReactRouter>
<Route
path="/create-account"
component={CreateAccountPage}
exact
/>
<Route path="/login" component={LoginPage} exact />
<Redirect from="/" to="/login" exact />
</IonReactRouter>
)}
</>
</IonApp>
);
}
See full app and source code here : https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter
In JQuery Mobile you can easily group buttons horizontally by:
<div data-role="controlgroup" data-type="horizontal">
1
2
3
</div>
and vertically by
<div data-role="controlgroup" data-type="vertical">
1
2
3
</div>
but how can I make them group both horizontally and vertically?
Thank you!
Use a jQuery Mobile GRID.
<div class="ui-grid-b" >
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:
.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
margin: 0 !important;
}
Here is a DEMO