How to add a vertical panel to a panel?

Question

I'm just trying to add a vertical panel that can go from top to bottom on the right side of my panel. I would rather have a class instead of inline CSS style. Can someone tell me what I am missing, please? Thank you very much in advance!

Note:

• I want the div inside my p-panel to make a vertical panel

Here is my code:

Plunker

<p-panel> <p-header> Title </p-header> <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea> <div class = "my-class"></div> </p-panel> 

Here is a photo of what I want:

Answer 1

Here you will find: https://plnkr.co/edit/K3SQnzRBjuZMRH0P61u3?p=preview

 .ui-panel { position: relative !important; } .my-box { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 40px; background: red; } 

Answer 2

You can use flexbox layout.

override the ui-panel-content class to use flex properties:

 .ui-panel-content { padding: 0 !important; display: flex; justify-content: space-between; // for the textarea to be on the left and the border on the right } 

Here is your HTML content for your panel:

 <div class="panelContent"> <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea> </div> <div class="panelBorder"></div> 

and the corresponding CSS:

 .panelContent { padding:5px; } .panelBorder { background: red; width: 4px; } 

See Plunker

Answer 3

how about just inserting a div, giving it some width and some height (which you like), give it a position: absolute; then right: 0; and position: fixed?

 example{ background-color:red; width:5%; height:100%; right:0%; position:absolute; position:fixed; } 

or maybe the code is too simple? but here is the suggestion.