How do I style angular-ui bootstrap modal dialogs so they appear different from one another in color and/or size? I can style them for the site but not individually.
I found the following similar question but it only provides a solution to change all dialogs: How do I increase modal width in Angular UI Bootstrap?.
During initialization there are options to apply size='lg' and size='sm' but this is not nearly enough to style different dialogs as I would like.
I have tried structuring my html as follows:
<div id="area1">
<div ng-include="'my-dialog1.html"></div>
<div>
<div id="area2">
<div ng-include="'my-dialog2.html"></div>
<div>
Then I have made different css rules for area2 .modal-dialog and area1 .modal-dialog but they have no effect because the html output of those dialogs is not rendered as child elements of my divs.
Is there any way to get individual control over those dialogs?
Angular UI modal configuration can accept CSS class name parameter windowClass. You can provide individual class for each of your dialog and set necessary styles per class:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'fancy-modal'
});
It will add fancy-class to the topmost modal container, so from there you can set/overwrite whatever styles you want for any inner element. For example:
.fancy-modal .modal-content {
background-color: #EEE;
}
Related
i have a modal with id #exampleModal , and there are three more modals in website.
What i want is when i open the #exampleModal the .modal-open class should have this css
.modal-open{
overflow-y : "scroll"
}
And when the other three opens they should have the default that bootstrap gives?
Good practice if you have multiple Modals (or multiple carousels/accordions etc) is to make sure they all have a different id. This is important for W3C validation especially.
Best Bootstrap Tip - The id can be anything you want. Then you can style that id any way you want.
Let's say you label each one as id="modal-1" and id="modal-2" etc.
Then, in your CSS all the id's can be edited independently of each other...
#modal-1{
/* Your styling */
}
#modal-2{
/* Your styling */
}
Bootstrap runs this automatically when modal is shown:
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', function (event) {
exampleModal.style.overflowY = "scroll";
})
I'm having some issues using the Material UI Drawer component. When I try to display it in my webpage it tries to force the focus to the inner div and adds a shadow or border to the component if you're focused anywhere else.
Does anyone know what's causing this shadow to appear and how to disable it? Example screenshot below - you'll see a blue edge at the bottom (this is the same all the way round if I resize the element)
As soon as you click on content inside the Drawer e.g. a List element the shadow goes away. I assume it must be something to do with the component being modal?
<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
<div className={classes.dummy}>
</div>
</Drawer>
Note: The floatingMenu class only adds a margin at the top of 55px (i.e. the height of the AppBar - nothing else).
This is somewhat tricky, but possible with just some props and styling. The element that is shading the rest of the UI is the Backdrop component of the Modal component. Drawer uses Modal when it's in temporary mode. The hideBackdrop prop of the Modal controls whether the shade is seen or not, and you can pass this prop to the Drawer directly as well.
However, the Modal component itself would still cover the whole viewport, preventing you from clicking other areas of the UI, before the Drawer is closed. I'm not sure if there's a simpler way, but at least you can do it by just using CSS styling to make the Modal element "through-clickable" by setting its pointer-events to none. To restore the "clickability" of the drawer itself, you should then set its pointer-events back to all.
So, for instance, just using the style prop to make simple inline styling:
<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
<div style={{ pointerEvents: 'all' }}>
I'm a sidebar!
</div>
</Drawer>
A working example
If you twiddle with Material UI's styling solution, you could also pass the pointer-events style rule to the Drawer's own Paper through the classes prop.
I was able to fix the issue in a little more simplistic manner after reading the doc's a bit more. On the Modal page it states:
Notice that you can disable the outline (often blue or gold) with the
outline: 0 CSS property.
Based on this I didn't touch the component or inner components from my question but instead I simply added one extra CSS class outline: 0 to floatingMenu (which is already passed to the PaperProps):
floatingMenu: {
marginTop: '55px',
outline: 0
}
This resolved the problem and I no longer see the blue shadow border.
I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.
<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
<button md-menu-item>Item 1</button>
<button md-menu-item>Item 2</button>
</md-menu>
The predefined style settings work fine (e.g. setting the Menu to non-overlapping), but I would like to set the md-menu to 100% width and have a little space between the md-icon button, that expands the menu, which I can not do with the predefined directives from Angular 2 Material.
So far I found a solution with the /deep/ css command, but I read that the command is not supported by the major browsers any more.
What is a good way to customize a Angular 2 Material component? How could I style my md-menu, so that it has 100% width and some space between it´s expanding button?
To illustrate what I am talking about:
Draft of the menu
You can pass custom classes to menus.
<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">
Then you can target that class with global styles.
For your needs, unfortunately, you'll need to know some information about where your menu overlay is positioned, and hardcode some repositioning
.mat-menu-panel.my-full-width-menu {
max-width: none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
Plunker Demo
The right way to do this is to create a custom overlay component with material's OverlayModule (current in the material package, but soon to be moved to the cdk).
In Angular, ViewEncapsulation.Emulated is the default option which means, it tries to narrow-down the scope of the affect by adding surrogate keys to the host-element etc. One option could be is to add below css. But mind, this ng-deep will also be deprecated soon. Have to wait to know the alternative! https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
::ng-deep .mat-menu-panel {
max-width: none!important;
min-width: 400px!important;
}
To style mat-menu without turning off encapsulation for this component you should use 2 classes to increase specificity as exactly as you already did or use !important. However, to make it work you should put them into your global stylesheet so that you will override the default styles.
For various reasons, I have a component par section that uses the following style:
width: 250px;
margin-left: -76px;
This code increases the width of all components in the par and, for my purpose, centers it.
The issue I'm seeing now is that the AEM edit window programatically inherits the style of the par or its components as inline style. That means the width of the edit window stretches to ~3000px, so content editors can't see the left and right edges of the edit window.
Is there any way to either limit the scope of the style to only the components or specifically remove the styles from the edit windows?
AEM version 6.1, class UI
I can only assume those styles are attached to your parsys via a class? Why not restrict the addition of the class based on wcmmode.edit || wcmInit.isTouchAuthoring || wcmmode.design
I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.