My toast overlaps some buttons and the default opacity is too low and it makes reading the message difficult.
Here is my toast markup:
<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
<div id="root" class="toast align-items-center fade animate" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="toastMessage">
Hello World
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
I have tried simply setting style="opacity: 1" on the 'root' element, but that did nothing.
I've looked around online, but none of the suggestions I found work.
Also, is there any finer grained control of the position of the Toast other than Left, middle, Right? I'd like to position it by a percentage or fixed value if possible.
Did you tried..?
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
https://getbootstrap.com/docs/5.2/utilities/opacity/
Ok, for anyone not already a web/bootstrap guru, the trick here is the background color on the .toast class is set to be translucent (85%).
So in your own css file, make a style like so:
.bg-solid-white {
background-color: whitesmoke !important;
}
Obviously use whatever color and class name you like, then:
<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
<div id="root" class="toast align-items-center fade animate bg-solid-white" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="toastMessage">
${this.message}
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
And there you have it, a solid background.
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 tried with both order-xs-1 and order-xs-first, but none is working and i don't know why. I want on mobile the image to be first and the paragraph second.
<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>
There are a lot of things wrong with your code. I would go back and have a proper read of the way bootstrap handles breakpoints. If you have specified col-md-6 you don't need all the other col-SZ-6, as breakpoints work from a resolution UP.
As for your exact problem, it is easily fixed by putting the column first in the HTML and then letting bootstrap move it at the iPad breakpoint with order-md-last:
<div class="container">
<div class="row bg-white g-0">
<div class="col-12 col-md-6 order-md-last mb-3">
<img src="/images/section3/drink.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-md-6">
<h1 class="h2 fs-1 fw-light">Make It The Best</h2>
<h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
<p>A wonderful serenity has taken.</p>
<button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
</div>
</div>
</div>
You should also not use H tags to style headings, either apply a H class like I have or use CSS to change the size of your headings. Heading tags should also go in order H1->H2 etc...
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>
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/