I have browsed throughout this forum trying to find a solution.
My problem is simple, the mat-sidenav doesn't straighten through the whole empty height, occupying only the content height.
<div class="main-container" fullscreen>
<div class="main-banner">
<button (click)='menuBar.toggle()'>XYZ</button>
<h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
</div>
<mat-sidenav-container>
<mat-sidenav #menuBar mode='over' class="menu-container">
<app-menu></app-menu>
</mat-sidenav>
<mat-sidenav-content class="content-container">
<app-kushman></app-kushman>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<div class="main-container">
<mat-sidenav-container fullscreen>
<mat-sidenav #menuBar mode='over' class="menu-container">
<app-menu></app-menu></mat-sidenav>
<mat-sidenav-content class="content-container">
<div class="main-banner">
<h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
<button (click)='menuBar.toggle()'>XYZ</button>
</div>
<app-kushman></app-kushman></mat-sidenav-content>
</mat-sidenav-container>
</div>
Related
I have a webpage that shows an image up to size 400x400px, if they click on the image then I want it to display in a modal that sizes to accommodate the actual size of the image
The modal comes up but it defaults to 500px whatever the size of the image (from https://getbootstrap.com/docs/5.2/components/modal/#fullscreen-modal). If the image is larger than that I want the modal to be larger, and if smaller I want the modal to be smaller, I cannot see how to do this. I notice you can also have a fullscreen image by using modal-fullscreen but that doesn't help me.
Surely possible for the modal to size to accommodate the data
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div>
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
</a>
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="https://via.placeholder.com/500" class="figure-img img-fluid border border-dark">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Edit
So I went though the answers at How to resize Twitter Bootstrap modal dynamically based on the content
The only answer that sort of worked was adding style="max-width : 1200px;"to the div with bootstrap class of modal-dialog
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
The trouble is that if the actual height of the image is larger than the height of the browser window then the image has to be scrolled vertically
What I actually want is the full image to be displayed full size but only if enough room in browser, otherwise display the max size it can be displayed without vertical scrolling. I can set a lower value for max-width so it works on my window, but then that is not going to be great for users with bigger resolution windows.
It does handle preventing sideways scrolling okay, so if the width of window is too small to show whole image it will shrink image accordingly, and we can reasonably assume images will usually be square.
So my attempted solution was to use Bootstraps container system to set different max-width size for different screen widths using col-md, col-xl ectera. But the trouble is it seems from the help that modal windows need to use their own container within the modal-body div but this isn't going to help because the max-width style has to be applied at the modal div so is outside of modal-body scope.
I tried just utilising the main page container, but it just uses the first dialog code each time, i.e it never uses more than 700px max width
<div class="row g-0">
<div class="col p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 700px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
<div class="col-md p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="img-fluid border border-dark">
</a>
</div>
At the moment, this is the best solution I could come up with using only CSS:
.modal-dialog {
max-width: max-content !important;
}
.modal-body {
display: flex;
}
.modal-body img {
object-fit: contain;
}
Only problem is that white bars appear to the left and right of the image when screen height is less then image height.
This is because of the object-fit: contain; style which I added to the image to maintain the original aspect ratio. If you remove this style then then white bars will disappear but the image will not keep it's initial aspect ratio when it's height is shrinking.
JS Fiddle: https://jsfiddle.net/hvaosw5j/
I have an app where I'm using custom svg icons using Materials 'MatIconRegistry'.
The import works fine, but a strange thing is happening when I have multiple icons on a page. For some reason, any icons that following an initial icon end up bing the same as the first, even though they are clearly labeled as another icon.
When I comment out the initial icon, the next instance changes to the one being called by that instance, but then all the following icons then change to that icon.
What could be causing this?
Here is the code:
<mat-sidenav-container>
<mat-sidenav mode="side" opened="true" class="app-sidenav">
<div class="logo-wrapper">
<img
class="menu-logo"
alt="Avocado"
src="./assets/logo.png"
/>
</div>
<div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/"
mat-button
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<div>
<mat-icon svgIcon="dashboard"></mat-icon>
</div>
<div class="button-label">
Dashboard
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/sessions"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="sessions"></mat-icon>
</div>
<div class="button-label">
Sessions
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/users"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="users"></mat-icon>
</div>
<div class="button-label">
Users
</div>
</a>
</div>
</div>
</mat-sidenav>
<mat-toolbar class="app-toolbar">
<h2 class="page-title">{{pageTitle}}</h2>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-container>
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/
I'm getting white space at bottom of the page in iPad and I use jQuery mobile beta2. I'm splitting the UI as primary and secondary page.
when I move from first page to second page I'm getting white space in bottom of the iPad. Can any one help me?
Thanks in advance.
code:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//page:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
Her I found solution for this problem. I set content height.
.ui-content {
min-height: 775px;
}
It's because your 'content-primary' does not take too much space. You can solve it in few ways, but I guess that the most logic one will be to use media queries (CSS) and to set the div dimensions in your CSS file. For more info: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW, You might want to use jQuery mobile Beta 3