I'am developing an ionic 4 application and I've created a popover.
Inside this popover I want to use a ion-fub-button that has to be fixed in the top-right position of the popover.
The HTML code that I've written is like this:
<ion-content>
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button (click)="getStats()">
<ion-icon id="closeBTN" name="stats" color="light">
</ion-icon>
</ion-fab-button>
</ion-fab>
<div>
......
</div>
</ion-content>
As you can see, I want that the ion-fab-button should stay FIXED in the top-right position of the popover, but in reality it doesn't stay fixed, but scrolls with the rest of the content.
May anyone tell me why and how I can fix it?
I've also tried to insert the button inside a ion-header, but also the ion-header scrolls with the rest of the popover. And I've also tried to use css position:fixed for this button, but it doesn't work.
May anyone help me?
This works for me on 25-02-2021 with Ionic 5
html
<div class="fixed">
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button size="small">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
css
.fixed {
position: fixed;
bottom: 30px;
right: 0;
}
Maybe this link will help you. In my case, if ion-fab is placed in the custom component inside ion-content, fixed property not work properly.
Related
I have an ionic card modal overlay that's triggered by a button. When I first added it, it worked as expected. But the moment I refresh the app, it changes behavior.
This first screenshot shows the correct behavior. The modal covers part of the screen and it touches all the screen edges, except the top.
And this is how it behaves after I refresh. The modal is confined to the shrunk background, leaving spacing between the screen edges.
Here's my modal code:
<ion-modal #modal mode="ios" class="auto-height" trigger="open-schedule-modal" [presentingElement]="presentingElement">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button (click)="modal.dismiss()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<div class="inner-content">
<ion-list>
<ion-item>
...
</ion-item>
<ion-item>
...
</ion-item>
</ion-list>
</div>
</ng-template>
</ion-modal>
And the relevant SCSS:
The issue doesn't lie here because I tried removing all styling and it still occurs.
ion-modal.auto-height {
&.bottom {
align-items: flex-end;
}
--height: auto;
.ion-page {
position: relative;
display: block;
contain: content;
bottom: 0;
.inner-content {
max-height: 80vh;
overflow: auto;
padding: 10px;
}
}
}
When initially loading the ‘app’, at browser launch, your developer tools aren’t active. Ionic selects an ‘theme’ based on your device. If you inspect your page you’ll see that the gets the ‘md’ with ‘platform-core’ classs (and some more stuff) at startup. When using the developer tools with the device mode enabled and you refresh at that point, the app reloads and the class is set again based on your ‘selected device’. In your case iPhone 6/7/8. You’ll now have e.g. ‘ios’ and ‘platform-ios’ and more set. This is giving you that ‘css error’.
This is not an error btw. You’ll just have to implement some platform specific css tweaks. That will fix your problem.
Try using:
ionic serve --lab
You’ll be able to view multiple platforms and it’s styles. This way you’ll be able to inspect them easily and create platform specific css tweaks easier.
I've got a bit of a problem I can't solve. So basically I've got a fixed feedback button on my screen, looking like this:
.feedback-button-container {
position: fixed;
bottom: 0;
z-index: 3;
right: 15%;
}
<!-- When Modal opens <body style="padding-right: 17px;">
<body>
<div class="feedback-button-container">
<a>
<button class="feedback-button">Give Feedback</button>
</a>
</div>
</body>
I've also got a modal. When I open the modal it adds a padding of 17px to the right of <body>, this way the scrollbar will hide when the modal is open. The problem is that when I open the modal, because of the increased 17px of padding my feedback button shifts to the right. Is there some easy way to fix this?
EDIT:
I made a mistake in my wording, the 17px of padding aren't supposed to hide the scrollbar, they're supposed to add the space that the scrollbar left when overflow:hidden;
I think you want to remove the scrollbar from the modal rather than adding a padding to hide it. You can try overflow:hidden to do this?
I've got the following div structure of my content window, using BS4 framework:
<div class="container-fluid">
...
<div class="row">
...
<div class="container">
...
<div class="row row-grid">
...
<div class="col-8"> <!-- my left sided content, long block of cards-->
...
<div class="col-4"> <!-- my right sided card-block that I need to be sticky and follow the left as user scrolls down-->
I see in the docs that the nav-bar has a .sticky-top class - but when I try to use this in my example here things get wonky.
How can I just get my col-4 div to stick to the top of the browser window, when the user scrolls to see the content in the col-8 div?
Clarification
My right and left content divs live under other static content, like the navbar and a header block. So on page load, the right (sticky) div should be in it's native position, and only stick to the top of the window when scrolling beyond it's visibilty. I've updated the fiddle to show kind of what I mean.
Fiddle
Use position: fixed css property
CSS
.fixed-div{
position : fixed;
top: 0;
right: 0;
}
You're basically after position: sticky;; unfortunately, browser support is still somewhat lacking. If you only care about browsers that support it, the syntax is similar to:
.sticky // or whatever selector you want to use
{
position: -webkit-sticky;
position: sticky;
top: 75px;
}
See the MDN article for position for a better explanation, but, to put it simply, the value of top is the distance from the top of the viewport (or the nearest positioned container) where the element switches from static to fixed positioning. It's the same affect that the Affix plugin provides in Bootstrap 3.
I am trying to add two buttons on the top of this page:
http://213.229.81.180/~demo/
I have managed to add them via putting this code:
<div class="hochzeit-button-header"><img id="hochzeit-button" src="http://213.229.81.180/~demo/wp-content/themes/creativepearl_child/btn_hochzeit.png" alt="hochzeit button" title="hochzeit button"></div>
<div class="portrait-button-header"><img id="portrait-button" src="http://213.229.81.180/~demo/wp-content/themes/creativepearl_child/btn_portrait.png" alt="portrait button" title="portrait button"></div>
The problem remains that now all the other content in the menu has moved down, so the Header is getting too big.
I would like to have the images just float on top of the other stuff in the menu like the facebook, google plus buttons.
You need to absolutely position the buttons inside the header. To do so, add position:relative to the button's parent element and add position: absolute and something like top: 10px; right: 30px; to the buttons.
Well I have this code which is fairly simple and should set margin-top of HTML 5's button element to 1px when it is active ( mouse clicked on it). But what I get is a messed up layout, because the button does what it should do only it does it for both of the buttons which are right next to each other. Can you tell me what is causing this error to occur?
Here is a sample HTML code (because i cant just link to jsfiddle), but the link to jsfiddle is right at the bottom
<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
<div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
<div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
<img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
<div id="nav_holder"> <!-- positions the navigation and buttons -->
<nav>
<ul> <!-- navigation -->
<li class="active">prices</li>
<li>features</li>
<li>contact</li>
</ul>
</nav>
<button class="login">login</button> <!-- login button -->
<button class="getStartedNow">Get started now</button> <!-- get started now button -->
</div>
<div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
</div>
</header> <!-- END of header -->
Here is jsfiddle.Ignore missing pictures etc, just click on the orange button and you will see what i am talking about.
jsfiddle
Thank you
Here is my solution http://jsfiddle.net/burn123/emfwA/16/
What I Changed
You had the opacity, box-shadow, transitions, and border-radius set for the buttons set on both buttons, which is redundant. I changed it so that it would apply to all buttons
Browser prefixes are not needed for box-shadow or border-radius
For your login button, you forgot the period before your login class, so the css was trying to find a element named login, which doesn't exist
Removed the active and hover from both elements and set a generic active and hover pseudo element
Added position relative to each button
On active, the button will be given a property of top: 1px
Changed the size of the header to min-width:100% so that the line will go all the way across
The main problem was coming from the fact that your buttons were set at a position of static, so by applying a margin-top of 1px, you were shifting the entire top down. By setting a position of relative, you can add properties such as top or left and it will move the element in that direction while still keeping the space of the element in the same position
I would set the nav_holder and getStartedNow classes to position:relative and then use top:1px to move it down the one pixel. That seems to fix the issue.
button.getStartedNow:active {
position: relative;
top: 1px;
}
I think the previous problem was caused by the way margins work but I don't know it well enough to speak to that.
You would also want to do this with the login button to get the same effect there.
Add position: relative to the .getStartedNow class, and change the active snippet to:
button.getStartedNow:active {
bottom: -1px;
}
Here a live example: http://jsfiddle.net/emfwA/17/ ..