I am using a donation widget from another company which I have made use of on my website. I would like to change the size of the photos in the dropdown menu next to the item on the menu. I want to change it to 50x50 pixels.
Unfortunately, all I have is the widget code itself. I do have a image example, that could help to clear up what I'm talking about.
$data.WebPhotoId {
max-width: 50px;
max-height: 50px:
}
dropdown-menu databind= {
max-width:50px;
max-height:50px;
body {
font-size: 16px;
font-family:Helvetica, Arial, sans-serif !important;
color: #676767;
}
}
My question is, is there any way I modify my CSS in order to change the menu item pictures?
Well if it is set with <img src="path/to/image"> you can't do it nicely with CSS.
In that case I would suggest using JavaScript or jQuery for this.
var image = document.getElementsByClassName('image-class')
for(var i = 0; i < image.length; i++) {
image[i].src="path/to/new/image";
}
With CSS you can set background-image: url('path/to/new/image') but I don't think it will work in case where image is set with <img src="path/to/image">
I have several combo boxes all over the page. And there is one combo box that I want to be responsive.
Let's assume I have layout containing it, just like this:
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
and I have CSS like this:
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
But when I do this, only combo-box-caption colors get changed. But I also want to change the color of the popup window.
According to combo box CSS style rules (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) i add v-filterselect-suggestpopup and nested styles outside MyUI style:
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
After that, i have a combo box with caption colors that responsively get changed. But popup window color remains same (always yellow).
I think it's because popup window is rendered outside my responsive UI. Responsive.makeResponsive(displayBoxFilter) didn't work. How do I make this window responsive?
Any suggestions would be helpful!
Thanks in advance
UPD based on Jouni's answer (worked for me):
I have added #media outside #mixin in mytheme.scss like this:
#mixin mytheme {
#include theme;
...
}
#media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}
This is a limitation in the Responsive extension, that it doesn’t apply to any overlay elements (except the Window component).
You’re best workaround is to use regular CSS media queries.
I have issue with setting menu text and icons in sticky header to be black, in my site. I searched for right class, but cant find it into CSS styles. I tryed this CSS:
.header-wrapper .stuck {
color: #000 !important;
}
but not make any changes. So how to make text and icons in sticky header black ?
According to the website you've given, you just need to do remove the class named .nav-dark from the div having id #masthead when scrolled (or .stuck class is added with .header-wrapper).
Include jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use jQuery:
function customizeHeader() {
var window_top = $(window).scrollTop();
if ($('.header-wrapper').hasClass('stuck')) {
$('#masthead').removeClass('nav-dark');
} else {
$('#masthead').addClass('nav-dark');
}
}
$(function() {
$(window).scroll(customizeHeader);
customizeHeader();
});
You'll get something like:
Hope this is what you're trying to achieve and it helps!
Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of the popup container and make it scrollable, change the background color, so forth. What's the best way to do so? Is there a css that I can play with?
There are two ways which we can use to change size of your MatDialog component in angular material
1) From Outside Component Which Call Dialog Component
import { MatDialog, MatDialogConfig, MatDialogRef } from '#angular/material';
dialogRef: MatDialogRef <any> ;
constructor(public dialog: MatDialog) { }
openDialog() {
this.dialogRef = this.dialog.open(TestTemplateComponent, {
height: '40%',
width: '60%'
});
this.dialogRef.afterClosed().subscribe(result => {
this.dialogRef = null;
});
}
2) From Inside Dialog Component. dynamically change its size
import { MatDialog, MatDialogConfig, MatDialogRef } from '#angular/material';
constructor(public dialogRef: MatDialogRef<any>) { }
ngOnInit() {
this.dialogRef.updateSize('80%', '80%');
}
use updateSize() in any function in dialog component. it will change dialog size automatically.
for more information check this link https://material.angular.io/components/component/dialog
Content in md-dialog-content is automatically scrollable.
You can manually set the size in the call to MdDialog.open
let dialogRef = dialog.open(MyComponent, {
height: '400px',
width: '600px',
});
Further documentation / examples for scrolling and sizing:
https://material.angular.io/components/dialog/overview
Some colors should be determined by your theme. See here for theming docs:
https://material.angular.io/guide/theming
If you want to override colors and such, use Elmer's technique of just adding the appropriate css.
Note that you must have the HTML 5 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 )
With current version of Angular Material (6.4.7) you can use a custom class:
let dialogRef = dialog.open(UserProfileComponent, {
panelClass: 'my-class'
});
Now put your class somewhere global (haven't been able to make this work elsewhere), e.g. in styles.css:
.my-class .mat-dialog-container{
height: 400px;
width: 600px;
border-radius: 10px;
background: lightcyan;
color: #039be5;
}
Done!
You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.
For example, .md-dialog-container is the main classe of the MDDialog and has padding: 24px
you can create a custom CSS to overwrite whatever you want
.md-dialog-container {
background-color: #000;
width: 250px;
height: 250px
}
In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in its previous version, you should do what you think is best for you.
sharing the latest on mat-dialog
two ways of achieving this...
1) either you set the width and height during the open
e.g.
let dialogRef = dialog.open(NwasNtdSelectorComponent, {
data: {
title: "NWAS NTD"
},
width: '600px',
height: '600px',
panelClass: 'epsSelectorPanel'
});
or
2) use the panelClass and style it accordingly.
1) is easiest but 2) is better and more configurable.
For the most recent version of Angular as of this post, it seems you must first create a MatDialogConfig object and pass it as a second parameter to dialog.open() because Typescript expects the second parameter to be of type MatDialogConfig.
const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
dialog-component.css
This code works perfectly for me, other solutions don't work.
Use the ::ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The ::ng-deep combinator works to any depth of nested components, and it applies to both the view children and content children of the component.
::ng-deep .mat-dialog-container {
height: 400px !important;
width: 400px !important;
}
I think you need to use /deep/, because your CSS may not see your modal class. For example, if you want to customize .modal-dialog
/deep/.modal-dialog {
width: 75% !important;
}
But this code will modify all your modal-windows, better solution will be
:host {
/deep/.modal-dialog {
width: 75% !important;
}
}
This worked for me:
dialogRef.updateSize("300px", "300px");
You can also let angular material solve the size itself depending on the content.
This means you don't have to cloud your TS files with sizes that depend on your UI. You can keep these in the HTML/CSS.
my-dialog.html
<div class="myContent">
<h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
<form [formGroup]="myForm" fxLayout="column">
<div mat-dialog-content>
</div mat-dialog-content>
</form>
</div>
my-dialog.scss
.myContent {
width: 300px;
height: 150px;
}
my-component.ts
const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });
On smaller screen's like laptop the dialog will shrink. To auto-fix, try the following option
http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html
Additional Reading
https://material.angular.io/cdk/layout/overview
Thanks to the solution in answersicouldntfindanywhereelse (2nd para).
it worked for me.
Following is needed
import { Breakpoints, BreakpointObserver } from '#angular/cdk/layout'
component.ts
const dialog = matDialog.open(DialogComponent, {
data: {
panelClass: 'custom-dialog-container',
autoFocus: false,
},
});
styles.scss
// mobile portrait:
#media (orientation: portrait) and (max-width: 599px) {
// DIALOG:
// width:
.cdk-overlay-pane {
max-width: 100vw !important;
}
// padding
.custom-dialog-container .mat-dialog-container {
padding: 5px !important;
}
}
Is it me or is Twitter bootstrap just not responsive at all using LESS?
One a test site I've set the following:
// Articles
.article {
.makeRow();
}
.article-content {
.makeColumn(7);
}
On resizing the page I'm getting horizontal scroll bars.
A quick check of the CSS shows the width of my article-content column to be 540px; not matter what my screen size.
The makeColumn mixin outputs the static grid. Try this instead:
.article-content {
#grid > .fluid .span(7)
}