Here is my code
<div style=" background-color: yellow; height: 350px; padding-top: 45%;">
<p-button
type="button"
(click)="visibleSidebar1 = true"
icon="pi pi-arrow-right">
</p-button>
<div style="background-color: green; height: 250px;">
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
<h1 style="font-weight:normal">Left Sidebar</h1>
</p-sidebar>
</div>
</div>
I have use sideBar inside the child element But it is showing in outside the child element. like this sidebar in outside
But i want to show the side bar inside the child element (green area). like this this is what i expect
Have any way to achieve this? my stackBlitz
Please define below CSS properties in your "`\src\styles.css" file
p-sidebar div.p-sidebar
{
position: relative !important;
}
Related
I have the following div styled and ready:
everything is working according to plan EXCEPT the "like" button, which I have as a div with the current css (to ease in seeing the border, I have also added a green border for debugging):
.article-likes {
margin-right: 16px;
float: bottom;
bottom: 8px;
left: 5px;
border: 3px solid #73AD21;
}
and this is the html for the entire div.
<article class="media content-section">
<img class="rounded-circle article-img" src="/static/profile_pics/b1775e70284ad2de-1.png">
<!--- THE ELEMENT I AM TRYING TO MOVE IS DIRECTLY BELOW THIS LINE::::: --->
<div class="article-likes"><a class="btn btn-success btn-xs" href="">like</a></div>
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="/user/1">1</a>
<small class="text-muted">(me) July 18, 2020 - 04:16 AM</small>
<div style="float:right;" class="mr-2">
<a type="button" class="btn btn-secondary btn-xs" href="/post/3">view</a>
</div>
</div>
<h2><a class="article-title" href="/post/3">demo post</a></h2>
<p class="article-content">demo post sorry</p>
</div>
</article>
I am trying to get the like button positioned directly under (and slightly offset to the left) of the user image (profile picture). I have tried float:bottom; but this does not seem to stick the image to the bottom of the post. I have also tried adding margins but those end up messing the other elements in the article tag.
Here is an example of what I am trying to achieve (inside red rectangle is optimal placement):
If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>
and Voila! you have a column of contents, very simple.
Dude, I gotta say, your code is totally messed up. For God's sake, don't use such lengthy class names for such a simple code. And as I can see, you don't have basic knowledge about floating a div. Anyways, here is you answer. Just remove your css code and paste mine.
.article-likes {
width: 100px;
height: 50px;
border: 1px solid green;
}
I'm working in Confluence, and I'm trying to create some CSS styling for UI boxes (made up of divs that I can change using !important) without carrying through to child divs. Since other macros (divs with default styling) can be nested inside these UI boxes, the !important styles are carried through unintentionally.
To be more specific - I have a yellow background-color in the div.rwui_type_note. Inside is another div when a user creates a panel macro inside the Note UI box. The parent div (UI Note) styling is making the text background in a child div (Panel) yellow.
I need the div.panel-contentto keep it's default styling as defined by Confluence, or as manually defined by a user in the macro when using the page editor.
Here is the custom CSS for the Note UI Box:
.rwui_type_note, .rwui_type_note p
{
background-color: #FFDC1E !important; /*Needs to be important to override defaults*/
color: black!important;
}
Here is how Confluence creates the HTML when the a white bg panel is created inside a Note UI box:
<div class="rwui_text_box rwui_text_small rwui_type_note rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
<span class="rwui_icon rwui_iconfont_note"></span>
<span class="rwui_content rwui_body rwui_has_icon ">
<p>Text in a Note UI Box</p>
<div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
<div class="panelContent" style="background-color: white;">
<p>Text in a Panel - user set to white background</p>
</div>
</div>
</span>
</div>
Here is what it looks like:
Screenshot - UI Box with Panel
If I understood your goal correct, you can do it by inheriting parent background-color property
.rwui_type_note,
.rwui_type_note p {
background-color: #FFDC1E !important;
/*Needs to be important to override defaults*/
color: black !important;
}
.panelContent p {
background-color: inherit !important;
}
<div class="rwui_text_box rwui_text_small rwui_type_note rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
<span class="rwui_icon rwui_iconfont_note"></span>
<span class="rwui_content rwui_body rwui_has_icon ">
<p>Text in a Note UI Box</p>
<div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
<div class="panelContent" style="background-color: white;">
<p>Text in a Panel - user set to white background</p>
</div>
</div>
</span>
</div>
You can use > for it. I think this will solve your problem.
.rwui_type_note, .rwui_body > p {
background-color: #FFDC1E!important; /*Needs to be important to override defaults*/
color: black!important;}
Another recommendation is that don't use block elements in an inline element.
What I want:
My image to be resized and centred.
What's happening:
The image is resized, but not centred
My code:
< img style="text-align:center;width:204px;height:204px;" src="image.jpeg" >
What am I doing wrong and how can I prevent this happening with other elements?
Your text-align: center; should be placed on the parent element, not itself.
<div style="text-align: center;">
<img style="width: 204px; height: 204px;" src="image.jpeg">
</div>
In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:
<div id="container">
<div class="col-md-10"></div>
<div class="well col-md-10">
<p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
<hr>
<div class="well col-md-6" align="center">
<p> <span class="glyphicon glyphicon-info-sign"></span>
Start your work by setting a name for your Desk</p>
</div>
</div>
<div class="col-md-10"></div>
</div>
It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!
Here's my CSS:
hr {
border-color : #474343;
}
.header-dimensions {
width: 110px;
height: 50px;
}
.logoname-dimensions {
display: inline;
width: 115px;
height: 40px;
}
.navbar-pad:{
padding: 0;
}
.right-float{
float: right;
}
What you are trying to do is kind of working against itself.
First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.
Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.
So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.
Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.
I have a header graphic that is positioned in centre of the page, being in the centre it moves according to the windows size, however I would like to put some buttons below it that are anchored to the left of the header so that when the header moves the buttons are always shewn starting below the lower left corner of the header graphic.
Is this possible ?
this is what I have in the html:
<div id="header">
<p class="centeredImage"><img src="supt_files/main_back.jpg" width="804" height="116" border="0" alt=""></p>
<div id="centretext">
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> How Do I... </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Servers </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Significant services </button>
</div>
</div> <!-- Header -->
in the css :
#header
{
width: 100%;
height: 157px;
position: relative;
top: 0px;
background-color: SlateGrey;
}
#centretext
{
text-align: center;
}
I would do this with CSS. You can either create a class that's centered with a defined width (anything within the div tags would align) or put it into your background definition so everything aligns.
With DIV tags:
Alter the HTML in the following way:
<div class="anchored">
images, etc (whatever you put here)
</div>
and then add the following to your CSS document:
.anchored{
display:block;
margin-left:auto;
margin-right:auto;
width:<whatever your banner/desired width is>;
}
This means that anything within the div tags will be aligned.
Whole Document:
The HTML can stay as it is, and add the following to your CSS document under body:
body{
width:<whatever your banner/desired width is>;
margin:auto auto;
}
This will make everything on the page--text, pictures, etc.--fit within the specified width, much like this page.
I hope that helps!