I'm using Material-UI and I'm trying to apply ellipsis to the underlying Typography component in CardHeader, but passing noWrap into titleTypographyProps doesn't seem to work.
Do I need to override CardHeader somehow? I tried setting max-width: 100% on both CardHeader and the underlying Typography component with no luck.
Demo
The issue is with MuiCardHeader-content flex. You need to give it a width so that it may show itself inside its parent.
.MuiCardHeader-content {
flex: 1 1 auto;
width: 100%;
}
In order to expand the answer by #Awais, if you override the content CSS class for the header with this:
content {
display: contents
}
It will make your header handle the ellipsis properly even if you use a icon.
Related
For a sidenav with an embedded iframe, i was getting double scrollbars,
I fixed that using
::ng-deep.mat-drawer-inner-container {
overflow: hidden !important;
}
This is now causing other mat-drawer-inner-container overflows to be hidden too. How can i fix this?
To hide the scrollbar from the side panel you just need to add the below css to your style.scss
.mat-drawer-inner-container::-webkit-scrollbar {
display: none;
}
Please Note: If you use this CSS in the sidebar component then it will not work!
add this to your style.scss without ::ng-depp, so maybe you put this inside some module where you need it.
// Remove scrollbar from mat-sidenav inner container
.mat-drawer-inner-container {
overflow: hidden !important;
}
I cannot properly set the width to fill the available space for a p-tree primeng control.
It works in chrome devtools when I do it manually but doesn't when I do it in the style file of my component.
Stackblitz link:
https://stackblitz.com/edit/angular6-primeng-gjz1po
The tree will stay 18em of width no matter what.
Thank you in advance.
The html code:
<p-tree [value]=filesTree1></p-tree>
The css code:
.ui-tree {
width: 100%;
}
You can use styleClass property of p-tree control.
<p-tree [value]=filesTree1 [styleClass]="'my-tree'"></p-tree>
Add below css in tree.scss file.
:host ::ng-deep .ui-tree.my-tree {
width: 100%;
}
Here is stackblitz
2 issues plnkr
http://plnkr.co/edit/uGSGtK6FtiICc1HbYy5i?p=preview
margin-left breaks
flex-grow breaks
and some other rules too due to components tags.
Styles provided by other team, they stored separately and some of them are related to media-query, so i can't use uglyhack with :host { margin-left: auto; }. Also some styles (flex-grow e.x.) have numerical values and can't be easily tracked and changed on real styles changes.
How this can be solved without writing angular-specific styles?
margin-left doesn't not move user to the right. if you want it be there then use a style
.header-user {
position: absolute;
right: 16px;
...
}
flex layout works if you use a style on <flex-item> element. Yes, angular created this element inside the container that should be 1st child of the parent div.
I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with width: initial, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.
Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.
How can I adjust the css so that the div is just large enough to fit its contents?
Becuase the css by default is:
.ngdialog.ngdialog-theme-plain .ngdialog-content {
max-width: 100%;
width: 450px;
}
If you override the width: 450px, then as a div - a block level element - it defaults to full width.
You can change it to display: inline-block to make it "just fit"
You can use css property display
display:table;
if you just want to show html table in ngDialog, this will work perfectly and will fit your table into it.
Make sure your table width!
In your JSFiddle, .ngDialog is attached to a div and doesn't overwrite it's CSS display: block; property, which is why box spans across the entire screen; it has nothing to do with the width property. Set .ngDialog to include display: inline-block; and remove any properties for width.
You can customize the ngDialog theme as below:
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-mine,
scope: $scope
});
I copyed the "ngdialog-theme-default" block from ngDialog-theme-default.css to mine.css, then change "width" and rename it to "ngdialog-theme-mine".
It works.
Please tell me how can I create a Richfaces page where I want to keep the collapsible panels fixed and below that I have another form. As the form is very large. So I want to put a scroller. Do I need to use frameset or is there any support for that in Richfaces
Nothing jsf-specific. That is usually done via CSS:
create a <div class="limitedHeightDiv">
define the css class in a css file:
.limitedHeightDiv {
height: 100px;
overflow: scroll;
}
(You can define these styles inline, using style=".." as well)
#Bozho
.limitedHeightDiv {
height: 100px;
overflow: auto;
}
Will work a way better, in the previous case you will have scroll bars even if you don't need them. I guess it is just a question of different design and flavors.
auto