I'm a beginner in Ionic Framework. Recently I have built a page with a swipe-back-button on the left of the navigation bar. This shifts the title a bit to the right: (I have added a red background to the title to illustrate this)
Not using position: absolute:
To center the title, I added the following css code:
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
}
It works:
Using position: absolute:
The problem is that the title now "covers" the swipe-back button, making it impossible to click on the button.
Any solutions? Thank you in advance.
Try to add position:relative and some z-index value to your back button...
I have created a working snippet to illustrate your problem
div {
position: relative;
}
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
box-sizing: border-box;
}
button {
width: 20px;
height: 20px;
background: green;
position: relative;
z-index: 99;
}
<div>
<button></button>
<ion-title>About</ion-title>
</div>
Related
I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.
You can set the content to "" and use background-image instead, and set the background-size to 1em.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I have got the following code:
Fiddle
.item {
width: 120px;
padding: 10px;
display: block;
background-color: #CCC;
float: left;
margin: 5px;
position: relative;
}
.item .item-preview {
position: relative;
z-index: 10;
display: block;
}
.item .item-content {
/*display: none;*/
position: absolute;
left: 0px;
top: 37px;
padding: 5%;
z-index: 11;
width: 90%;
background-color: #000;
color: #FFF;
}
I want the div ".item-content", when its displayed, is always on the left side and is as wide as the whole page, how can I do that?
If you remove the position: relative from .item, you will have the desired effect. I also removed the top: 37px; to fix the vertical positioning. If you need to tweak that, use margin-top instead
Fiddle
I am having a problem with my website. I created a button that will open a chat. But this button don't stay in the right place in all browser and screen monitors. Due to the browser zoom, the button do not stay like I want.
This is my page: http://www.assembleia.org.br/site/webtv/
The CHAT button needs to be right after the box, like this photo: http://imageshack.us/photo/my-images/20/cssfix.jpg/
But in others browsers, the button goes to right and right.
Here's my css:
<style>
* { /* trying to RESET CSS */
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
#tab /* the button CHAT */{
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 27%;
/*float: left;*/
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
#panel /* the panel */ {
min-height: 367px;
position:absolute;
left: 1355px;
top: 171px;
background-color: #D4D4D4;
max-height: 367px;
min-width: 0; /*new line*/
}
#panel .content /* for the chat */ {
min-width: 100px;
text-align: center;
/*margin-right:300px;*/
margin-right: auto;
max-width: 100px;
}
#close /* for the little red X after opening the chat */ {
position: absolute;
left: 1758px;
top: 168px;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
text-decoration: none;
}
#share /* for facebook sharing after opening the chat */ {
position: absolute;
left: 1656px;
top: 540px;
font-size: 10px;
font-family: Verdana,sans-serif;
}
</style>
Thx..
use this
#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
Use position: relative; attribute on your parent wrapper div, then change #tab CSS as follows:
Add position: absolute;
Change top to top: 50%;
Change right to right: 25px;
This was tested using Firebug and should give the desired effect.
I'm building a menu with 100% width - and I'm trying to position one button on the left side and one on the right side.
This is what I have, however as you can see the button is not placed 8px from the right.
How would I go about it? Thanks!
#options-buttons {
height: 40px;
width: 100%;
}
.okay_button
{
position: relative;
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: left;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
.okay_button:hover
{
background-position: 0 -34px;
}
Use float right and right; jsFiddle
.okay_button
{
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: right;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
Working example (I replaced the background with text for demo purposes):
You are mixing float, display, and position incorrectly.
You simply need to change position: relative; to position: absolute; on your .okay_button, since that will force it to be relative to its container, not its otherwise normal position.
Working example: http://jsfiddle.net/zPkH8/3/
.okay_button
{
position: absolute;
...
}
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;