I am using the Ionic 3 Framework and want to insert the following type of fab menu in my Ionic 3 App.
Special Fab Menu:
In your SCSS file:
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
position: absolute;
top: -8px;
right: 40px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
}
}
.fab{
contain: layout;
}
Your HTML file:
<ion-fab bottom right >
<button ion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab>
<ion-icon name="logo-facebook"></ion-icon>
<ion-label>Facebook</ion-label>
</button>
</ion-fab-list>
</ion-fab>
Please refer to this link...
whats the correct way of inserting label in an Ionic FAB list
This one is fairly easy to impelement. I've tested this on Ionic 3 and it works
Thanks to #mark. for right to left languages (rtl) you should alter the scss file according to this: (add left: 45px; instead of right: 40px;)
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
position: absolute;
top: -8px;
// this is the difference:
left: 45px;
color: white;
background-color: rgba(70, 70, 70, 0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px
}
}
.fab{
contain: layout;
}
I also changed the background color of ion-label and its font size to appear more beautiful.
And your html file should be like the #mark:
<ion-fab bottom right >
<button ion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab>
<ion-icon name="logo-facebook"></ion-icon>
<ion-label>Facebook</ion-label>
</button>
</ion-fab-list>
</ion-fab>
Related
I have a button and I want to make a name of the button disapear when you hover over it. At the same time I want the background to change and show a list on the button.
.buttons{
width: auto;
position:horizontal;
font-size: 0;
background-color: darkslategrey;
border-radius: 10px;
}
.buttons .btn-1{
display:inline-block ;
border-radius: 8px;
background-image: url("/img/teatritood.JPG");
cursor: pointer;
background-size: 100%;
border: none;
padding:none;
height: 30rem;
width: 33.3%;
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 30px;
box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey;
}
.btn-1:hover{
background-image: url("/img/teatritood.JPG");
cursor: pointer;
transition-duration: 0s;
background-size: 100%;
border: none;
padding:none;
width: 30.33%;
height: 30rem;
font-size: 0px;
box-shadow: none;
box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey;
}
.btn-1:hover::after{
display: block;
content: attr(data-hover);
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 38px;
transform: rotateY(180deg);
}
<pre>
<section>
<div class="buttons">
<div>
<button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
<button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
<button type="button" class=btn-3 data-hover="Uus list">Muud</button>
</div>
</div>
</section>
<div class="hidden-list">
<div>
<ul>
<ul><a>Projektid</a></ul>
<ul>Kirjeldused</ul>
<ul>Pildid</ul>
</ul>
</div>
</div>
</pre>
I'm trying to set the color of the header like this, but i can't.Any suggestions, in order to change the background color?
<ion-header >
<ion-navbar >
<img src="../../assets/img/Header.png">
</ion-navbar>
</ion-header>
and the css is
img {
display: block;
height: 20%;
width: 20%;
margin-left: auto;
margin-right: auto;
color: "#D3C3B4x";
background-color:"#cccccc";
}
.ion-navbar{
color: "#D3C3B4x";
background-color:"#cccccc";
}
.ion-header
{
background-color:"#cccccc";
position: absolute;
top: 5%;
left: 5%;
}
You can add it to the $colors array from your variables.scss file:
$colors: (
// ...
custom-color: #cccccc,
//...
);
And then use it in the view:
<ion-header >
<ion-navbar color="custom-color">
<img src="../../assets/img/Header.png">
</ion-navbar>
</ion-header>
it doesn't work that, but i did that
loginmodal-page{
$color:#D1C3B0;
img {
display: block;
height: 20%;
width: 20%;
margin-left: auto;
margin-right: auto;
color: "#D3C3B4x";
background-color:"#cccccc";
}
.ion-header
{
background-color:$color;
position: absolute;
top: 5%;
left: 5%;
}
}
and it works fine
Put the following into \src\theme\variables.scss
$toolbar-background: #cccccc;
$toolbar-border-color: #cccccc !default;
$toolbar-active-color: #cccccc !default;
I would like to get some help with this. I've tried so many different ways and no one works. I want this in only HTML and CSS.
.circles {
background-color: white;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row {
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
<div class="row">
<div class="circles"></div>
<div class="circles"></div>
<div class="circles"></div>
</div>
Here is an example via jsbin:
http://jsbin.com/tezocucufi/edit?html,css,output
There are a couple different ways to get it to "not interfere" with other elements... but depends on what your situation.
Circle code:
border-radius: 50%;
width: 100px;
height: 100px;
Alignment could be with floats, or:
display: inline-block;
and position'ing both the element and the parent container to position it on the page.
Reference: https://davidwalsh.name/demo/css-circles.php
So I'm making a website for a school assessment, and I was wondering why my Nav bar links are always slightly below the actual nav bar itself. If anyone could help that'd be great :).
ul {
text-align: center;
padding-left: 1px;
top: -10px;
list-style: none;
}
ul li {
font-family: Arial;
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: 0px;
padding: 10px 89.5px;
background-color: #6C2DC7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #8467D7;
}
a:link {color:#FFFFFF;} /* unvisited link */
a:visited {color:#FFFFFF;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
a {
text-decoration: none;
}
This is what it looks like on my website.
If you change this it will work:
line 75 of your style.css
ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
really you should make this just for your nav bar and not for every ul so you could change it to the below: up to you though both ways work :)
#navigation ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly.
Here is my code..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
Where is the problem? I can't find.
Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??
Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
I've found a solution of this without changing any css..
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it.
I don't know I'm right or wrong?
Delaying the line which sets the opacity to '1' by a few ms is now working.
Now Run the updated code below and see it works -
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
function hideModal() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.display = "none"
}, 300);
}
#bellNotification {
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover {
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip {
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp {
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
width: 50%;
min-height: 200px;
background-color: white;
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input {
color: #4d4d4d;
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip">
<div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.
<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" />
<input type="button" value="Proceed" />
</div>
</div>