i'm trying to make a page that allows the user to create branches for incomes and outcomes, but i'm having a bit of a challenge creating the branch lines using CSS. What i did is create a div with 2 borders and position absolute.
The page generates infinite account cards using ngfor.
The branch lines should all connect to it's parent branch.
The code i wrote:
`<div [#showLine] *ngIf="line.Expanded">
<div [#showLine] class="subAccount" *ngFor="let account of line.subAccounts; let i = index">
<div class="setBorder"></div>
<app-laccount-line [line]="account" (deleteAccount)="removeSubAccount($event)" (enableDRE)="enableDRECompositive()" style="width: 97%; z-index: 2;"></app-laccount-line>
</div>
</div>`
`.setBorder{
border-left: 1px solid lightgray;
border-bottom: 1px solid lightgray;
width: 2%;
height: 100%;
position: absolute;
left: 0rem;
top: -1.5rem;
z-index: 1;
}`
This is the result so far:
enter image description here
Is there a way to do it with CSS?
Managed to do it with the below CSS
<div [#showLine] *ngIf="line.Expanded" class="lineExpand">
<div [#showLine] class="subAccount" *ngFor="let account of line.subAccounts; let i = index">
<div class="setBorder"></div>
<app-laccount-line [line]="account" (deleteAccount)="removeSubAccount($event)" (enableDRE)="enableDRECompositive()" style="width: 97%; z-index: 2;"></app-laccount-line>
</div>
</div>
.setBorder{
border-bottom: 1px solid lightgray;
width: 2%;
height: 0px;
position: absolute;
left: 0rem;
top: 1.5rem;
z-index: 1;
}
.lineExpand:after{
content: '';
position: absolute;
bottom: 1.5rem;
left: 0;
height: 100%;
border-left: 1px solid lightgray;
}
Result
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 11 months ago.
I have a task to do the following figure. but I don't know how to design the arrow alongside the column.
my code:
p {
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
}
p::before {
content: attr(data-person);
background-color: #ddd;
position: absolute;
left: 5px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after {
content: "";
background-color: #e84747;
padding: 5px;
height: 48.56px;
position: absolute;
left: 108px;
margin-top: -20px;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>
I used my before and after properties, if I do the arrow I won't do the column and vice versa.
Easiest way is to put a left border on the p and that frees up the ::after pseudo element for the triangle. Make sure you put position: relative on the p and then all the position: absolutes are based on that.
The actual triangle is created by making a series of borders transparent and one colors, and with the same size (to make a square).
The way this all works is that the borders meet at the corners as mitres (like a picture frame) and so when all of them are the same - its as if there is a square with 4 inward facing trangles and only one of the m has the color - hence the colored triangle.
p{
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
border-left: solid 5px #e84747;
position: relative;
}
p::before{
content:attr(data-person);
background-color: #ddd;
position: absolute;
left: -110px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after{
content: "";
position: absolute;
left: -15px;
top: calc(50% - 10px);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #e84747;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>
I'm used my university project for Ionic -3 I'm try to create sample image as
Avatar to set of the small icon, but its cant do that correctly , any one know how to make correctly like this
My code sample
my code
<ion-item>
<ion-avatar item-start>
<img src="assets/imgs/user.png">
<div>
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
</ion-icon>
</button>
</div>
</ion-avatar>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<ion-note item-end>3:43 pm</ion-note>
</ion-item>
css
#notification-button {
position: relative;
width: 42px;
top:1px;
right: 1px;
overflow: visible!important;
}
#notifications-badge {
background-color: red;
position: absolute;
top: -3px;
right: -3px;
border-radius: 100%;
}
Underneath the answer, Before I saw your code...
I don't have ion stuff, but I can help you with the css, is this kinda what you need?
position: relative; on the .ion-item and to get the small button on its right place, just put this position: absolute; right: -5px; bottom: -5px; in the button
.ion-item{
position: relative;
height: 100px;
width: 100px;
}
.ion-avatar{
border-radius: 50%;
background-color: tomato;
box-shadow: 0 0 4px 3px #ccc;
height: 100%;
width: 100%;
}
button{
position: absolute;
right: -5px;
bottom: -5px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: blue;
border: gray 1px solid;
cursor: pointer;
color: white;
}
<div class="ion-item">
<div class="ion-avatar">
<div>
<button id="notification-button">
<div class="ion-icon">
!!!
</div>
</button>
</div>
</div>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<p>3:43 pm<p>
</div>
update
When I played with chrome web tools a bit, I found this to get the button to the point you wanted it.
#notification-button[_ngcontent-c0] {
position: absolute;
width: 42px;
top: 25px;
left: 30px;
overflow: visible !important;
}
changed your position: relative; to position: absolute; and changed the top and right, I'm not sure if your working responsive. But take a look if this helps. Otherwise, I know another good solution.
Please see in JS Fiddle demo:
html:
<div class="r">
<div class="e_1">xxx</div>
<div class="e_2">
<div class="e_c" >
<table class="e_c">
<tr>
<td>dsdssdsds</td>
</tr>
<tr>
<td>ssss</td>
</tr>
</table>
</div>
</div>
</div>
css:
.r {
position: relative;
}
.e_1 {
position: absolute;
top:0;
bottom:0;
height: 40px;
overflow: hidden;
}
.e_2 {
position: absolute;
top: 40px;
bottom: 0px;
border: 1px solid red;
}
.e_c {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
As you can see in the code (it's just a demo of my real case), I put a table inside the div .e_2. But when this is rendered by the browser, the table does not show up inside the .e2 element; I want the .e_2 div to wrap the table. And the expected result is have red border around the table.
How I can do that if not change the HTML structure ?
If you want just the table to have a red border use the border property:
border:1px solid red;
So in your case would be:
.e_c {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
border:1px solid red;
}
However if you really want the div to wrap around your table change the property of position from e_c and e_2 to relative:
.e_2 {
position: relative;
top: 40px;
bottom: 0px;
border: 1px solid red;
}
.e_c {
bottom: 0;
left: 0;
position: relative;
right: 0;
top: 0;
}
This would however make the div extend to the whole width unless you add the display property to your .e_2 class:
.e_2 {
display: inline-block;
position: relative;
top: 40px;
bottom: 0px;
border: 1px solid red;
}
See updated fiddle here: http://jsfiddle.net/designingsean/BeeUY/5/
The biggest issue is that the table does not need to be position:absolute, since its parent already is. That corrects the table placement, but then the border is not right. The best way to fix this is to put the border on the table itself, rather than the containing div.
The affected portions of the CSS:
.e_2 {
position: absolute;
top: 40px;
bottom: 0px;
}
.e_c {
border: 1px solid red;
}
.e_c table.e_c {
border:1px solid red
}
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!
Please look at the code below. If you look at the diagram of the body, each colour represents different content on the right. However, these links won't work in IE, I assume due to the CSS I have written.
Can anyone shed some light on how I can replicate this in IE?
HTML:
<div id="male">
<img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
<div class="head"><span class="whole fakelink"></span></div>
<div class="neck"><span class="whole fakelink"></span></div>
<div class="arm1"><span class="whole fakelink"></span></div>
<div class="arm2"><span class="whole fakelink"></span></div>
<div class="torso"><span class="whole fakelink"></span></div>
<div class="legs"><span class="whole fakelink"></span></div>
</div>
CSS:
div.head {
position: absolute;
width: 70px;
margin-left: 31px;
height: 70px;
}
div.neck {
position: absolute;
height: 6px;
width: 18px;
margin: 70px 0px 0px 56px;
}
div.arm1 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 100px;
}
div.arm2 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 0px;
}
div.torso {
position: absolute;
height: 118px;
width: 70px;
margin: 77px 0px 0px 31px;
}
div.legs {
position: absolute;
height: 105px;
width: 69px;
margin: 195px 0px 0px 31px;
}
.whole {
width:100%;
height:100%;
display:block;
}
.fakelink {
color:white;
font-weight:bold;
}
.fakelink:hover {
cursor: pointer;
text-decoration:none;
}
I know of only two solutions to fix this issue, though they both ultimately come down to needing a background:
Option 1
Set a background-color on .fakelink that is not transparent. Whilst clearly in your case this wouldn't be very helpful it will illustrate the need for a background.
If you were only needing to support IE9, I would suggest using rgba with a low alpha opacity:
.fakelink{ background-colour: rgba(255,255,255,0.01) }
Option 2
Use a small transparent .png or .gif and tile it as the background-image for .fakelink