Is it possible to have a scroll bar in an ionic card and if so how do you do it?
Question
I want to have particular size for the ionic card and when the data increases the user should be able to scroll down within the card so the user can see the information
5
I solved the problem by setting the following css code on my ion-card :
ion-card {
max-height: 100%;
display: flex;
flex-direction: column;
}
I also removed the ion-card-content element, and apply the following css code on the ion-list :
ion-list {
overflow: hidden;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
}
Related
I want it to have a standart design on ionic input elements. I have an ion-select element and this element inside select box text align-left but I want select-icon align right. I do on HTML element like that: https://ibb.co/99YXc8B. But I am not doing in the sccs style. I try a lot. Stackblitz link: https://stackblitz.com/edit/ionic-fdqf4z?file=pages%2Fhome%2Fhome.scss
Replace your CSS with this CSS code.it will works.
[inline-icon] {
font-size: 2em !important;
padding-right: 3px !important;
color: #808080ba !important;
}
.try{
color: red;
width:100%;
}
ion-select
{
max-width: 100%;
}
I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.
This is a CSS class I'm applying to the ion-refresher:
ion-refresher {
background-color: #dedede;
}
ion-refresher-content {
background-color: #dedede;
}
And this it what the result looks like:
How do I remove the white gap between the ion refresher and the main content?
On Ionic 4, this CSS worked for me:
ion-refresher-content {
padding-bottom: 200px;
background-color: yellow;
.refresher-pulling {
position: fixed;
top: 50px;
}
}
The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.
Hope this helps someone.
When you pull up, one div was been created called fixed-content
For remove the gap just add .fixed-content in your .scss
Example:
.fixed-content{
background:#dedede;
}
This is what got it working for me.
ion-refresher-content {
padding-bottom: 100px;
background-color: #dedede;
}
#devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).
Proper solution (Ionic 4):
ion-refresher-content {
position: relative;
padding-bottom: 200px;
background-color: var(--base-background-color-body);
.refresher-pulling, .refresher-refreshing {
position: relative;
top: 30px;
}
}
Appendix: best UX on my opinion can be achieved with next HTML:
<ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
<ion-refresher-content
pullingIcon="refresh"
refreshingSpinner="crescent"
></ion-refresher-content>
</ion-refresher>
I am using Ionic Framework to build an Android Application. I need to display horizontally scrollable cards. Each card will display a product image, product title, product price and a button. I tried using ion scroll in x-direction, but cards doesn't seem to scroll in x-direction.
I tried using this plugin, but it seems like it can be use only with ion-pane and i am using ion-content.
In the meanwhile, i found another solution -
<div class="cardHolder">
<ul>
<div>
<img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" >
</div>
</div>
CSS
.cardHolder {
height: 200px;
width:100%;
padding: 8px;
margin: 6px;
}
ul {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.examplePic {
height: 150px;
width: auto;
border:1px solid black;
margin: 2px;
}
The issue with this solution is that, I am only able to retrieve the image and not the other details.
You should look into ionic's built-in ion-scroll. Your code would look something like this. Also checkout this example
<ion-scroll direction="x">`
....your scrollable content here...
</ion-scroll>
Also checkout this example
I am trying to fit my website for iphone
for that i am using twitter bootstrap responsive css
i gave the container with different border colors for different width
but when i minimize the browser window the border colors are not reflecting for the browser window
http://jsfiddle.net/CXkQp/1/
http://jsfiddle.net/CXkQp/1/embedded/result/
#media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
border: 1px solid red;
}
If I understand your question correctly, the page example you posted should be responsive, though I'm not sure that your bootstrap grid is setup the way you need it.
You have nested container divs for one thing # lines 120 and 145
Check what happens if I rename your 2 container divs:
http://jsfiddle.net/panchroma/CXkQp/3/embedded/result/
http://jsfiddle.net/panchroma/CXkQp/3/
line 120
<div class="containerA" style="background-color: white;">
line 145
<div class="containerB">
There are also some validation errors which could possibly be another piece of the puzzle. The cause may be that you can't simply paste HTML head content into the jsFiddle HTML panel as you have done. Check http://doc.jsfiddle.net/use/hacks.html#css-panel-hack for details on what you need to do.
My appologies if I've misunderstood something
Good luck!
I'm trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can't figure out why mobile safari is not displaying them properly:
the top left logo just plain won't show up
the search box in the top right is way too far to the left
the red slogan in the header "A Resource for Nonprofits etc" is too large, too low, and extends beyond the right border
the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large
Everything else seems ok, at least on the home page. What's weird is that all four problems above occur in the header.
Any help would be hugely appreciated!
Thanks!
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block; style!
Search box
I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!