Could someone help me with the layout of those PrimeNG components?
I would like to have a tree taking the whole vertical space (minus buttonset at the bottom), scrolling if needed. Tree is being places inside a tab panel.
Thanks in advance
https://stackblitz.com/edit/angular-np8of7?file=src/app/app.component.html
Either you can add this kind of CSS
.p-tree {
height: calc(100vh - 300px);
overflow: auto;
}
but in order to apply it, you have to declare encapsulation: ViewEncapsulation.None in your component definition. See StackBlitz.
Either you just add in your CSS:
:host ::ng-deep .p-tree {
height: calc(100vh - 300px);
overflow: auto;
}
Related
I have a component in angular which opens up modal dialog on click of the button. I have many such different buttons which open modal dialogs of different types of different width. I am using Ng bootstrap modal dialog and modal dialog all are same width but I want it to be different widths. I try overriding the css in the modal-dialog component ::ng-deep works but :host does not work. What am I doing wrong here, Please suggest.
My css for one of the modal-dialog is as below which works
::ng-deep .modal-dialog {
min-width: 700px !important;
max-width: 900px !important;
width: 95% !important;
background-color: red !important;
}
The below css does not get applied
:host::ng-deep .modal-dialog {
min-width: 700px !important;
max-width: 900px !important;
width: 95% !important;
background-color: red !important;
}
I know this answer is long overdue, but I just happened to face the same problem and found out the reason.
The ":host" pseudo-selector has the CSS rule applied to the <app-root> component.
However, your Dialog is created in a <div> at the same level with <app-root>, instead of inside the <app-root> component, thus the CSS rule is not applied to it.
Sorry for being so rough, I'm on the clock right now. If you need a more expansive answer, please just leave a comment.
Hope this answer can help someone in the future.
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
I marked this question with "react" tag, however, I think that framework does not matter so much in this case.
I have a component, whose job is to display some children. All this component does is it displays some styling - a border and a background - so it's just a box.
This box could be displayed "dynamically", so no static height would be specified - it could be "flex-grow: 1" for example.
How to make the children fill this component entirely?
This is my Box:
class Box extends Component {
render() {
return (
<div className={"box " + this.props.className}>
<h2>BOX</h2>
<div>{this.props.children}</div>
</div>
);
}
}
Here are its styles:
.box {
border-width: 5px;
border-color: black;
border-style: solid;
background-color: purple;
}
Ideally, child would just set "height: 100%", but this will not work, because Box does not define any height.
One solution would be to set "display:flex" on the div inside of which "{this.props.children}" is placed. However, this requires children to use "flex-grow: 1" - I think it's not best solution, because children shouldn't know how Box is implemented. It also makes the problem recursive - children of my children again need to use flex-grow...
//EDIT
Here's an example: https://codesandbox.io/s/nervous-sunset-bvhjh
Box-content should fill the whole place that it has in a Box, but it does not. How to achieve that?
You can achieve that in pure css (this way, children do not need to be aware of the flex mode of their parents) :
.row2 {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.row2 > div {
flex-grow: 1;
}
by styling all the child divs.
a codesandbox to see the result
I'm working on an app that uses AngularJS and Bootstrap. To help, I'm using Bootstrap UI. In this project, I'm using the typeahead control. I'm trying to make the list that appears below the text box, the same width as the text box itself. No matter what. At this time, it's always changing size. However, I'm not sure how to do this get the suggestion box to go be the same width as the text box. Currently, I'm trying the following:
Here is my plunker
Currently, I have the following, which isn't working.
.dropdown-menu {
width:75%;
}
Can someone help me get the width of the suggestion list to be the same width as the text box?
Thank you!
You can use CSS3 calc() to calculate a width of the .dropdown-menu dynamically.
.dropdown-menu{
width: -moz-calc(100% - 28px);
width: -webkit-calc(100% - 28px);
width: calc(100% - 28px);
}
and remove white-space: nowrap; from .dropdown-menu>li>a. Hope it will help you!
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