I am trying to hide the scroll bar on my ion-scroll I have tried everything and can not get it to go away. Can someone please help me with this? I have tried all the attributes and i have also used css like ::-webkit-scrollbar and setting it to display: none;. That hides it in the browser just fine but when I look at it on an emulator or my physical iPhone it still shows. Here is my ion-scroll.
<ion-scroll scrollX="true" scrollbar-x="false" id="contests-filter">
<ion-row nowrap class="app-padding">
<div *ngFor="let name of filterNames;">
<ion-chip>
<ion-label>{{ name }}</ion-label>
</ion-chip>
</div>
</ion-row>
</ion-scroll>
Try adding [overflow-y: auto;] OR [overflow-x: hidden] in the CSS.
Related
Consider a simple Ionic page's content:
<ion-content>
<ion-refresher slot="fixed">...</ion-refresher>
<div *ngFor="let item of items">
...
</div>
<ion-infinite-scroll>...</ion-infinite-scroll>
</ion-content>
I made a Stackblitz to demonstrate this page: https://stackblitz.com/edit/ionic-v4-angular-tabs-nbjk4k
Now I would like to add something with fixed position – let's say <div>Some content</div> – on the top or bottom of the page that is NOT within the ion-header or ion-footer section. Is it possible to fix that div to stick to the top or bottom?
The official advice I found on the Ionic docs and Github was to use slot="fixed" on any element that I would like to fix in the content area.
It somehow does not work for me, maybe there is a conflict with the slot="fixed" of the refresher component.
How can I achieve a fixed element?
Indeed there was an issue with slot="fixed",
Ionic team did some changes for that.
The content(div?) needs to be wrapped in a position:relative wrapper.
Use position:relative in the tag and it should do the thing.
For example - <div slot='fixed' style="position:relative">Some content</div>.
Follow this PR for more Info. Hope this helps!!
Link: https://github.com/ionic-team/ionic/issues/17754
There is a bug on slot="fixed". In order for you to make your desired output, you need to put style="position: relative" as per the discussion above.
I created a simple sample for you below:
<ion-content>
<div slot='fixed' style="position:relative">Some content</div>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div *ngFor="let item of items; let i=index;" class="item">
Item {{i}}: {{ item }}
</div>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I have a mat-data-table with mat-expansion-panel as a column. For some reason on some rows the mat-expansion-panel has a border around it, how do I get rid of that. When the user hovers the mouse the expansion panel expands and when the mouse leaves it collapses. The data that those rows have, they are just as same as the ones without borders. Here in this picture its the notes column that has the mat-expansion-panel inside the mat cell.
<mat-cell *matCellDef="let workOrder">
<mat-expansion-panel class="" _ngcontent-c0="" ng-reflect-hide-toggle="true" #panel *ngIf="workOrder.notes !== ''" hideToggle="true"
(mouseenter)="panel.open()" (mouseleave)="panel.close()">
<mat-expansion-panel-header>
<mat-panel-title style="justify-content: center">
<mat-icon style="color:#8fbbdf;">notes</mat-icon>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-panel-description>
{{ workOrder.notes }}
</mat-panel-description>
</mat-expansion-panel>
</mat-cell>
The issue seems to be on mat-expansion-panel tag. If i remove all classes of it, the border disappear so it might be an "issue" on some class of it or with the combination of more than one.
i changed from:
<mat-expansion-panel _ngcontent-c0="" class="mat-expansion-panel ng-tns-c3-1 ng-star-inserted" hidetoggle="true" ng-reflect-hide-toggle="true">
to:
<mat-expansion-panel _ngcontent-c0="" class="" hidetoggle="true" ng-reflect-hide-toggle="true">
on the first element and this is the result (the desired one, i think):
Working fine when expanded too:
Hope it helps you
override the mat-expansion-panel display property like: mat-expansion-panel style="display: unset;"
I had a similar issue as well and I solved it by setting the background-color on mat-expansion-panel to be the same background-color as the rest of the content. In my case I set it to white.
The reason you couldn't inspect this in the devtools is because it's not a real border element yet it gets an appearance as one due to its similar sizing.
I have the following div and it shows a login button on a nav bar, but if the screen is small I want to hide this button. For some reason when I add the fxHide.gt-sm=true it doesn't hide when I make the screen smaller. How can I fix this?
<div fxHide.gt-sm="true">
<ng-template #login>
<button
mat-icon-button
[routerLink]="['/auth']"
[style.width]="'auto'"
[style.overflow]="'visible'"
matTooltip="Login or Register"
class="topbar-button-right">
<span>Login</span>
<mat-icon>exit_to_app</mat-icon>
</button>
</ng-template>
</div>
What you want:
Default behavior: shown
If lt-md (less than medium screen) => hide
With your current implementation you have:
Default behavior: shown
If gt-sm (greater than small screen) => hide
Now, what you want translates into:
<div fxShow fxHide.lt-md>
You could invert the logic into
<div fxHide fxShow.gt-sm>
That should do it.
fxHide.gt-sm means hide it when it's greater than small. Change it to fxShow.gt-sm if you only want it visible on larger screen.
Faced the same thing but after importing FlexLayoutModule it worked.
If the OP is having issues making the fxHide command work at all, this question may be a duplicate of Angular Material FlexLayout fxHide does not hide
You must ensure that FlexLayout is imported in all modules that wish to use it:
https://stackoverflow.com/a/62672981/4440629
I am building an Ionic3/Angular application and i have a list of cards of some notes like below:
So, you can see that my notes can be larger than the width of the card. So, it has been truncated as ellipsis using ion-item.
<ion-col col-11 class="padding-0">
<ion-item class="padding-left-0">{{noteInfo.Notes}}</ion-item>
</ion-col>
But, the problem is that Notes are not always plain string like "This is test". It can be a HTML element like
<span style='color:red'>This is test</span>
and the note may be larger than this simple note. As the note will be HTML element, i change my code for showing the note in the card like below:
<ion-col col-11 class="padding-0">
<ion-item class="padding-left-0" [innerHTML]="progressNote[0].HTMLNotes | safeHtml:'html'">
</ion-item>
</ion-col>
And the output is:
But, i have an expand button for every note and if i click on that the actual note is like below:
Now, you can see that setting the HTML in the innerHTML of ion-item, it does not show ellipsis if the notes is larger than the width. But, i need to show only a preview in the card and that preview needs to be colored.
So, is there any way to show the HTML element in an ion-item so that it takes as much as the width can fit in the card and then show ellipsis for rest of the content?
Thanks in advance..
Here's an example of a div with content that acts as you wish, you can apply the CSS rules on your ion-col.
HTML
<div class="card">
<div class="item">
short text
</div>
<div class="item">
long text wrgj rgoiherg eroighe goeirhg rgirg rgihreg
</div>
</div>
CSS
.card{
width: 200px;
}
.item{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Check ellipsis-angular npm package.
Using it you may add ellipsis automatically if HTML content overflows container.
Installation: npm i ellipsis-angular
Usage example:
<div ellipsis-angular>
<!-- Static HTML content goes here --->
</div>
or
<div ellipsis-angular [innerHTML]="someHTMLStringVariable"></div>
for dynamic html.
I want to add href to navigation bar buttons like we do for the ion-item.
For example:
<ion-list>
<ion-item menu-close href="#/app/home">
Dashboard
</ion-item>
<ion-item menu-close href="#/app/aboutus">
About Us
</ion-item>
</ion-list>
I want exactly this to happen for navigation buttons. But I couldn't find a href thing for button.
I tried both $state.go('app.home') and $window.location.href = '#/app/home'; for the button and both works. But it hides the menu button in the navigation bar with a back button. I do not want it to be happen like that. I want the menu button there. Like when we click the 'dashboard' in the menu.
Any help will be appreciated.
I got the answer for this.
In the ion-side-menus tag, write enable-menu-with-back-views attribute value to 'true', which is 'false' by default.
Eg:
enable-menu-with-back-views="true"
As per my knowledge you can not use "href" tag for <ion-item>. <ion-item> tag is only used under <ion-list>
It seems you are trying to make tabs. If it is correct you can create tab view project of ionic using following command.
"ionic start myApp tabs"