I created a css modification to change the modal width to 50% against 100% of the view. But the class modal-content is duplicated against modificated.
CSS
.modal-content{
width: 50%;
}
HTML
<ng-template #content>
<div class="modal-content">
<div class="modal-header">
<i class="fa fa-heart"></i> A
</div>
<div class="modal-footer">
<i class="fa fa-heart"></i> B
</div>
</div>
</ng-template>
I also faced the same issue in my development and i found the solution with help of windowClass in ng-bootstrap
const modalRef = this.modalService.open(UserPasswordComponent, {
windowClass: 'custom-modal-width' // add a custom class here where you open the modal
});
In your style.css control the width
.custom-modal-width .modal-content {
width: 50%;
}
make sure to remove your model-content class in your template
Related
I am generating a dialog box on a private Angular 6 app and based on how the designer wants, it sits too low unless of course my screen height is reduced, it's responsive and creates a cdk-overlay that has
style="justify-content: center; align-items: center;"
The documentation for angular 6 dialog here: https://v6.material.angular.io/components/dialog/overview
Unfortunately I don't see a config option or parameters that can set a max distance from the top, for example I never want the box further than say 200px from top. Any thought's or ideas on accomplishing this? Here is the general code driving all of this:
.ts code:
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
pre html template:
<ng-template #dialogTemplate>
<div class="customer-notification">
<div class="customer-notification-header">
<p><img src="../../../images/blah.svg" alt="Blah"> {{ announceHeader }}</p>
</div>
<div class="customer-notification-body">
<h3 mat-dialog-title class="customer-notification-title">{{ announceTitle }}</h3>
<p mat-dialog-content class="customer-notification-content">{{ announceBody }}</p>
<div class="spacer-12"></div>
<div mat-dialog-actions class="dialog-buttons" layout="row">
<button ng-disabled="false" mat-raised-button id="got-it" class="outline-btn-prtl" color="primary" (click)="blahDialog.close('test', true)">GOT IT</button>
</div>
</div>
</div>
</ng-template>
The generated code is:
<div class="cdk-global-overlay-wrapper" dir="ltr" style="justify-content: center; align-items: center;"><div id="cdk-overlay-2" class="cdk-overlay-pane" style="max-width: 300px; pointer-events: auto; position: static;"><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c40-45 ng-trigger ng-trigger-slideDialog ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform:none;opacity:1;0:transform;1:opacity;opacity:1;transform:none;webkit-opacity:1;webkit-transform:none;"><!----><div _ngcontent-c37="" class="customer-notification ng-star-inserted" style=""><div _ngcontent-c37="" class="customer-notification-header"><p _ngcontent-c37=""><img _ngcontent-c37="" alt="AbacusNext" src="./blah"> Announcement</p></div><div _ngcontent-c37="" class="customer-notification-body"><h3 _ngcontent-c37="" class="customer-notification-title" mat-dialog-title="">24/7 Support Tier</h3><p _ngcontent-c37="" class="customer-notification-content" mat-dialog-content="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><div _ngcontent-c37="" class="spacer-12"></div><div _ngcontent-c37="" class="dialog-buttons" layout="row" mat-dialog-actions=""><button _ngcontent-c37="" class="outline-btn-prtl mat-raised-button mat-primary" color="primary" id="got-it" mat-raised-button="" ng-disabled="false"><span class="mat-button-wrapper">GOT IT</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></div></div></div></mat-dialog-container><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div></div></div>
Looks like the dialog-config.d.ts accepts an object with top, bottom, left or right and the position. So in my request for help, it looks like this is all I needed to add:
position: {top: '200px'}
or
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
position: {top: '200px'},
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
Simple enough but instead of deleting someone else might run into the same problem.
I use mat-menu of Angular Material with different mat-menu-item and I would like the list of menu items to be the same size as the button.
That's what I have:
And what I wish:
I tried to change the size of the menu with the css, but it does not work properly.
CSS:
.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>unarchive</mat-icon>
<span>First</span>
</button>
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span>Second</span>
</button>
</mat-menu>
I did a StackBlitz HERE for my mat-menu.
Thank you in advance!
EDIT : I changed my code because I'm using a responsive button with the bootstrap class "btn-block".
Use ::ng-deep to style .mat-menu-panel
::ng-deep .mat-menu-panel {
padding: 0 10px!important;
width: 100%!important;
}
See working code
I found a solution really not clean, but here it is: StackBlitz HERE
If someone would have a CSS solution, I'm interested.
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS:
export class AppComponent implements DoCheck{
ngDoCheck(){
var widthButton=document.getElementById("button").offsetWidth;
var elems = document.getElementsByClassName('mat-menu-panel');
for(var i = 0; i < elems.length; i++) {
elems[i].style.width = widthButton+"px";
}
}
}
CSS:
.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}
DEMO:
Use menuOpened event for matMenuTriggerFor and add width runtime
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" (menuOpened)="onMenuOpened()" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS:
onMenuOpened() {
const btn = document.getElementById('revisitSection');
if (btn) {
const elems = document.getElementsByClassName('button') as any;
// for (let i = 0; i < elems.length; i++) {
// elems[i].style.width = `${btn.offsetWidth}px`;
// }
for (const item of elems) {
item.style.width = `${btn.offsetWidth}px`;
}
}
}
I don't recommend to use ngDoCheck. it has more performance issue.
For those searching this in the future your can set this in your
.mat-menu-panel {
min-width: fit-content !important;
padding: 0px 0px !important;
}
.cdk-overlay-pane {
min-width: fit-content;
}
To make the mat-menu dynamic then you can apply with and styling in the component css of ts file through [ngClass]="getClassWithWidthandHieght()".Through css set the class of the in side div to the class like this the apply the styling set you styles.
.example-panel{
min-width: 500px;
}
In case somebody still needs this. Here is my solution
The idea is to read matMenuTriggerFor clientWidth, pass it to the menu itself as matMenuTriggerData, and bind it to the wrapper width
Since ::ng-deep is going to be deprecated,
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
another trick is to create margin around text span (mx-4 is bootstrap class for margin left and right
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span class="mx-4">Second</span>
</button>
<div class="row">
<div class="col-lg-2">
Panel for filter
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
I have a row in bootstrap. The row is divided into two parts. One is a div for filter panel and second is to show some content.
I have a button in the second part (bootstrap modal button). In the navigation breadcrumb, I'm giving an option to hide the filter panel.
All works fine. My problem is that when I hide the first div, In the filter panel my button in the second div also changes the position.
My requirement is that if I hide the filter panel, the button in the second div should not change even though the contents in the second div changes.
Does anyone know any workaround to achieve the desired result?
Try this:
$('button').click(function(){
$('#panel').toggleClass('inactive');
});
#panel{
background-color:red;
height:100px;
display:block;
}
#panel.inactive{
display:none;
}
#content{
position:relative;
background-color:green;
height:100px;
}
.btn{
position:absolute;
top:0;
right:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-2" id="panel">
Panel for filter
</div>
<div class="col-lg-6" id="content">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
The reason that the element (your button) moves can be caused by the different interpretation of position: fixed; on a few mobile devices.
I have experienced that the fixed element in question can not be a child-element of any moving (eg. scrolling) element. On desktop this seems not a problem. So you should place the button outside of the row or if needed inside just
position: absolute;
top:10px;
right: 10px;
or so as stated by kittyCat
A next reason could be: if you hide the first part of your row col-lg-2 then there are two grid-cells missing to the line. So just hide the content of the row:
So take the Example of kittyCat and change:
<div class="col-lg-2" id="panel">
Panel for filter
</div>
to
<div class="col-lg-2" >
<div id="panel"> Panel for filter</div>
</div>
and it should work as wanted.
Or if you need the space and you want to hide the col-lg-2 then change the class of the second element from col-lg-6 to col-lg-8.
I have used modal popup of Bootstrap in my project and want following things:
When open modal popup and click on the background popup should not close.
When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
After open modal popup user can also work on the background that time popup should not close.
1) When open model popup and click on the background popup should not close.
Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
// Modal HTML Markup
</div>
2) When open model popup background should not blur. meaning opening model popup background should not affect any way.
Set .modal-backdrop property value to display:none;
.modal-backdrop {
display:none;
}
3) After open model popup user can also work on the background that time popup should not close.
Add values in .modal-open .modal
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
SideNote: you may need to adjust the width of modal according to screen size with media queries.
Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.
.modal-backdrop {
display: none !important;
}
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working Fiddle Example
backdrop="false" will remove background black screen only but it will not allow you to do anything on background element.
To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate.
and need to use some custom css style. Add a custom class with modal
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
now after populate modal need to remove 'modal' class from myModal div
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
If you want to work on input/textarea elements when the modal is open you can use this.
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:Please change the cache behavior in IE from “automatic” to “Every time the page changes”.
In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages.
When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left.
What should I do to have an icon in right for LTR and in left for RTL ?
(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried this but it didn't help.)
Fiddle:
http://jsfiddle.net/mavent/dKPE3/1/
<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
You can override .pull-right class to float to the left when it appears after an rtl element.
Like this:
.rtl {
direction: RTL;
}
.rtl .pull-right {
float:left !important;
}
And your div element:
<div id="div2" class="alert alert-info rtl">
هذا هو بلدي وصف الهوى
<span class="badge badge-info">122</span>
<a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
<i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
</a>
</div>
Here is a FIDDLE
Alternatively, you can do it using javascript: (Using your same code just add javascript)
$(document).ready(function() {
$('.pull-right').each(function() {
if($(this).parent().css('direction') == 'rtl')
$(this).attr('style', 'float:left !important');
});
});
Hope this helps.
I don't know if this might help you but you can use this Demo, i.e. overriding the pull-right class
css
#div2 {
direction: RTL;
}
#div2 .pull-right {
float: left !important;
}
I'd suggest looking into this library. It is built on the Bootstrap core, and right-to-left support is included.
Another option to use this stand-alone library.
You could use RTLCSS to generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).