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.
Related
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
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.
Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.
As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>
Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
I'm following an blog post on displaying a "Loading" image when an Ajax call is being performed. The example has all of the styles inline and it works but I'm trying to convert it to having the CSS properties in an style sheet. Everything is converting just fine except for the filter property.
Here is the original code. The filter is in the main div and it is supposed to set the back ground of page to be transparent by 50% to draw attention to the Processing message.
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=50); display:none">
<p class="submit-progress" style="position: absolute; top: 30%; left: 45%; color: White;">
Processing, please wait...<img src="~/images/ajax-loading.gif">
</p>
</div>
This is the CSS I'm trying to convert it to.
.ajax-loading-wrapper {
position: fixed;
margin: 0px;
padding: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100px;
background-color: #666;
z-index: 30001;
opacity: .8;
filter: alpha(opacity=50) !important;
}
.ajax-loading-div {
position: fixed;
top: 50%;
left: 50%;
height: 7em;
padding-top: 2.3em;
width: 20em;
margin-left: -10em;
padding-left: 2.1em;
background-color: black;
color: white;
border-radius: 5px;
}
.ajax-loading-text {
position: absolute;
top: 15%;
left: 20%;
color: white;
}
.ajax-loading-icon {
position: absolute;
top: 45%;
left: 39%;
color: white;
}
<div id="divLoading" class="ajax-loading-wrapper" style="filter: alpha(opacity=50) !important;">
<div class="ajax-loading-div">
<span class="ajax-loading-text">
Processing, please wait...
</span>
<span class="ajax-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
</div>
When I inspect the page I see that the filter property is crossed out. I tried adding the !Important but that didn't work. I also tried adding just the filter to the divLoading style and that doesn't work either. What I see with these setting is a small section (~25%) at the top of the page that has this background color but I'm needing it on the whole page.
That's not quite how filter works (since IE8). It requires a list of filtering functions, each given a value. A working version of your example would be:
filter: opacity(0.5); // Opacity is 0 to 1, like the CSS property
Further Reading: MDN Docs
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