I put two images side by side on one page under the header as col-50. The issue is I want both images the full 50% width without any padding around any edges. I can't seem to figure it out with CSS
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-padding">
<img src="img/twitter.jpg" style="width:100%; display: inline-block">
</div>
The above worked in my browser (ionic serve) but did not work on my device.
the problem is images are considered to be inline, as a result any white space is considered as space, try this:
<!-- both images should be in-line to have it working -->
<img style="width:50%; display: inline-block" src="the_image_source"/>
<img style="width:50%; display: inline-block;" src="the_image_source/>
you can also isolate the css if you wish
img{
style: inline-block;
width: 50%;
}
You could just use :
no-padding
to the col div
<ion-row>
<ion-col col-6 no-padding></ion-col>
<ion-col col-6 no-padding></ion-col>
</ion-row>
See Ionic Documentation for Grid
Hope this helps.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How to center an element horizontally and vertically
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I need to vertically centre the ion-menu contents so that it is easier to access from a UX perspective. I am not sure of the best way to do it.
This is the ionic starter project code, which was set up by ionic start myProjectName sidemenu.
<ion-content>
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
<ion-list lines="none">
<ion-list-header>
<ion-label>Resources</ion-label>
</ion-list-header>
<ion-item href="https://ionicframework.com/docs/">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Ionic Documentation</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/building/scaffolding">
<ion-icon slot="start" color="medium" name="build"></ion-icon>
<ion-label>Scaffold Out Your App</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/layout/structure">
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
<ion-label>Change Your App Layout</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/theming/basics">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Theme Your App</ion-label>
</ion-item>
</ion-list>
</ion-content>
So I am trying to do something like below.
Edit:
Ionic component directives already use flex. I'm seeking a solution specific (preserving the responsiveness) to Ionic 4 where an ion-menu is nested in an ion-list inside an ion-content directive. None of the answers provided in the SO links is applicable to my question.
Ionic give API for fix menu bar in left and right option only. If you want to make like the above image you can use your own css like 'margin-top: 80px'
You can use either a grid layout or a flex layout to achieve this. Since you have elements in only one dimension, horizontal, flex would be an ideal option. Try the below code
.menu {
height: 500px;
width: 250px;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
}
.item {
padding: 1em;
border-bottom: 1px solid #ddd;
width: 100%;
}
<div class="menu">
<div class="item">
Home
</div>
<div class="item">
About
</div>
</div>
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
I have a page which shows list of images in a grid. Each picture has a constant height and width. When the user resizes the browser or loads the page, I want the number of images per row to be depending on the screen size. For larger screen sizes, the more images.
For now I tried this.
<ion-grid>
<ion-row>
<ion-col col-3 *ngFor="let product of products">
<ion-card>
<ion-card-content>
<div (click)="OpenProductDetails(product.ProductId)">
<img src="{{product.MainMediaUrl}}" style="height:200px; width:200px; margin:auto; margin-top:15px" />
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
Now on page load, it is loading correctly, but as I change the browser size or I make portrait to landscape, it is still the same and not responsive.
How can I fix this.
You could set breakpoints to your grid cols like this
<ion-col col-xs-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 *ngFor="let product of products">
col-xs- sets col for min-width: 0px and forward.
col-sm- sets col for min-width: 576px and forward.
col-md- sets col for min-width: 768pxand forward.
col-lg- sets col for min-width: 992px and forward.
col-xl- sets col for min-width: 1200px and forward.
Knowing this, if you set a col-md- it'll set the same number to cols lg and xl. Just see what's better for your problem, if in larger displays the image breaks then you can set a smaller number of columns when in mddisplays or larger.
Hope this helps.
I am new to Ionic framework, I want to resize the image. The image should become small and also the image should be displayed in the center of the page using ionic.
Below is my html code:
<ion-header>
</ion-header>
<ion-content padding>
<h2></h2>
<img src='assets/img/logo.png'>
<ion-chip color="secondary">
<ion-label color="#16B966">SEND RESET LINK</ion-label>
</ion-chip>
<div>
<span class="input-label">EMAIL</span>
<input type="text" placeholder="asdfjkl#panini.com">
</div>
<ion-card-content>
<p>Enter the email address associated with your account, and we'll email
a link to reset your password</p>
</ion-card-content>
</ion-content>
Use the following in HTML:
<img class="displayed" height="150 px" width="150 px" src="img/Logo.png">
and use the following in style.css:
.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
The more responsive answear is the package Image Resizer. It works fine, if you don´t use Rxjs. There are some dependency errors.
I made a website that has a jquery slider with left and right arrows that move to the next slide (webpage). All of the content is contained in one webpage and uses hashes.
http://www.ilandeistudio.com
It needed to have different full screen backgrounds for each page (hash) so I used a CSS technique that puts full screen backgrounds in DIVs which I found here (CSS Technique 1)
http://css-tricks.com/perfect-full-page-background-image/
This works but the height of the image is running off the bottom of the screen and therefore adding vertical scrollbars and you can't see the whole background image. I don't mind distorting the backgrounds a little (they are all w1024px x h682px) I just want the whole image in the viewable area.
I haven't been able to get it to work with CSS, let me know if someone has a suggestion otherwise maybe someone could recommend a jquery solution; but I don't know how to make most of those jquery examples work inside the DIVs for the multiple hashes.
Here is the CSS I am using now:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
And here are examples of two of the slides
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<!--Navigation starts-->
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>
The code itself looks correct. One thing that you didn't include but I would make sure of is that the header and navigation you have listed are positioned absolutely on the page rather than floating left and using margins to position things. That will add space to the 100% of the page.
So the image itself is expanding to the height of the page and the heights of header and navigation are being added on top of that. Most likely that is the problem if you seem to scrolling the height of those objects.