I have created a component and added an ion fab inside it. When I open the component as a modal the ion fab is not shown. When I click once in the place it is supposed to be it shows but when I close the modal and open it again I can not see it.
I thought it was because I had a custom css class but even without it I still can not see the ion fab until i click on the place it is supposed to be.
The problem is only on iOS, on Android it works as expected.
Here is my code:
Opening modal function:
async addCollection(item) {
item.isAdded = !item.isAdded;
let modal = await this.modalCtrl.create(
{
component: AddCollectionComponent,
cssClass: 'add-collection-custom-modal-css',
backdropDismiss: true
}
);
await modal.present();
let data = await modal.onDidDismiss();
}
css class:
.add-collection-custom-modal-css .modal-wrapper {
height: 70vh;
bottom: 0;
position: absolute;
display: block;
width: 100%;
border-radius: 12px;
}
AddCollection component
<ion-content>
<ion-row>
<ion-searchbar placeholder="Search collections"></ion-searchbar>
</ion-row>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
RECENT
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockRecentData" class="gray-bottom-line" lines="none" style="padding-bottom: 20px;">
<ion-item *ngFor="let recent of mockRecentData">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
YOUR BOARDS
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockYourBoards" lines="none">
<ion-item *ngFor="let recent of mockYourBoards">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="save()" size="small" color="white">
<fa-icon style="color: violet" [icon]="['fas', 'plus']"></fa-icon>
</ion-fab-button>
</ion-fab>
There are two things to consider here -
1.
As per Ionic's documentation, the Modal is a dialog that appears on top of the app's content. This means Modals will always appear at the topmost stack of your app. This is why, if you have a Tabbed app and open a Modal, all tabs will be hidden underneath the Modal page.
2.
As with Fab button, here Ionic says, "FABs generally float over the content in a fixed position. This is not achieved exclusively by using an FAB. They need to be wrapped with a component in order to be fixed over the content."
Therefore, you may try by NOT WRAPPING your <ion-fab-button> with ion-fab. You may place the <ion-fab-button> at a fixed place on the modal through Modal Component's SCSS file.
As a workaround, invoke hardware acceleration on fixed fabs inside modals by setting
ion-fab {
transform: translateZ(0);
}
reference: CSS performance relative to translateZ(0)
For a long time, a web site that I maintain had been using jQuery-UI v1.11.2. I decided to upgrade to the latest version which is currently v1.12.1. After the upgrade, I noticed that my jquery-ui buttonsets (which are basically radio buttons) now have the little dot showing. Previously that dot wasn't there.
I went over to the official jQuery-UI help docs for buttonsets. It turns out that their example now has those dots. I guess that's the new look.
Well, I want the old look back. No dots.
How do I made those dots disappear?
This widget is deprecated, use Controlgroup instead.
Suggest making use of classes.
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.
This gives you the ability to more directly modify the CSS of an element inside a widget. The "dot" is made by changing the background color of the span and then giving it a border to make the "dot" smaller.
$(function() {
$("#radio").controlgroup({
classes: {
"ui-controlgroup": "nodot"
}
});
});
div.nodot label.ui-checkboxradio-checked .ui-icon-background {
border: 0 solid #aaaaaa;
background-color: #aaaaaa;
width: 16px;
height: 16px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
<fieldset>
<legend>Favorite jQuery Project</legend>
<div id="radio">
<input type="radio" id="sizzle" name="project">
<label for="sizzle">Sizzle</label>
<input type="radio" id="qunit" name="project" checked="checked">
<label for="qunit">QUnit</label>
<input type="radio" id="color" name="project">
<label for="color">Color</label>
</div>
</fieldset>
</form>
There is still a hover effect being applied, that is adding a box-shadow that I couldn't find.
I'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
How do we create a "search input" or "add button" as the last tab of an Angular Material tabs component?
I did not see indication from documentation that this can be done. Can someone confirm if this is possible? Workarounds would be appreciated too.
The screenshot shows an example of what I would like: the "search input" as the last tab item:
The screenshot was taken from a random (i.e. any) YouTube channel.
Thanks!
While I do not think that having a input box inside the mat-tab is possible without editing the component, you can have an input box for the search after the mat-tab-group, and bring it into the same row as the mat-tab-group, e.g. by using flex in your CSS.
Example:
HTML:
<div class="container">
<mat-tab-group class="tabs">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<mat-form-field class="input">
<input matInput placeholder="Search" >
</mat-form-field>
</div>
CSS:
.container {
display: flex;
}
.input {
margin-top: 0.5%;
}
will produce this:
example image
Example on Stackblitz
May need some tinkering for display on mobile devices.
I'm trying to figure out how to add custom icons on the left and right side of a list item. I found this example (see link and code below) but if you notice the icon does not show up, it's just an empty circle. At first I thought it was because the link was invalid but I tried it on my page with my own image but the same thing happened. Unfortunately I only have a reputation of 13 so I am not allowed to post pictures, however here is a sample of how I would like the li item to have icons on both ends.
-*****************************-
| icon_left TEXT icon_right |
-*****************************-
<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.ui-icon-myapp-smiley {
background-image: url(http://swiftthemes.com/forums/images/icons/icon6.png) !important;
}
</style>
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li data-icon="myapp-smiley">My LI!!!</li>
</ul>
</div>
</div>
</html>
Code on jsfiddle page http://jsfiddle.net/KYaQT/
jQM 1.0.1 is quite old and outdated now. You should upgrade to 1.4 and jQuery 1.9 or greater.
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Text in list item 1</li>
</ul>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
For the icon on the right you had the correct approach. Set the data-icon attribute on the <LI>. In jQM 1.4, the CSS uses the pseudo :after element for the background image.
To add an icon on the left, you can put a span inline with the text and add CSS to position it.
If you don't want the gray disk behind the icon, set the background color transparent:
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
background-color: transparent;
}
Here is a DEMO