I am developing a project in Ionic 4 (Angular). I have a page where I need to display some images.
The following code is used for image display:
<ion-row>
<ion-col col-12 *ngFor="let photo of photos">
<div style="position:relative;">
<button class="close" (click)="deletePhotoConfirmAlert(photo)"
style="right:0px; position: absolute; width:30px; height: 30px;
background-color: red; color: white">
<span>×</span>
</button>
<img [src]="getImageSource(photo.attachmentId)">
</div>
</ion-col>
</ion-row>
Where the button as the purpose of deleting an image, and the img tag is the image itself.
The [src] binding calls the function getImageSource, which actually makes an API call to the server and returns an image as a file:
getImageSource(attachmentId) {
return environment.apiUrl + 'attachments/download/?id=' + attachmentId;
}
This is how it looks like:
Web version:
Mobile version (iOS):
As you can see, the image is not being displayed on mobile, it is just a small white square.
I have also tried on an android device and the same thing happens.
I should also mention that if uploading a photo from the mobile device (taking a camera photo), the picture is again shown as the small white square on the device, but if opened on the browser it is displayed correctly.
Note: The image is only for testing purposes, therefore out of context.
Set image height and width and try again.
<img [src]="getImageSource(photo.attachmentId)" height="200" width="200">
Or
Check image url in browser.
Related
I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?
Here is the code:
<div class="col-sm-2">
<div class="sidebar-nav-right">
<div class="navbar navbar-default navbar-style" role="navigation">
<div class="nav">';
<a class="brand font-26 block brand-color">Tools</a>
<ul class="nav navbar-nav center">
<li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
</div>
.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}
This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.
If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.
this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.
There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/
Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb
I think #GoreWang's comment is spot on. You should try the following 2 things:
(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:
.sidebar-nav-right {
left: 0;
}
(2) Add following code to your fixed element:
.sidebar-nav-right {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)
I make html+css+js for PhoneGap android application and I have some issue: jQuery Mobile side panel doesn't stretch on page's height, so I used following code:
HTML
<div data-role="panel" data-display="overlay" data-position="left" data-theme="a" id="main-nav">
Navigation
</div>
JS
$("#main-nav").css({
"height": $(document).height() + "px"
});
In usual browser it works! Chrome for Android, Browser on Samsung Galaxy handle it correctly. But after compiling to .apk panel gets height not from document, but window, so it has viewport's height! What should I do with this?
what if you do
#main-nav {
position: absolute;
top: 0;
bottom: 0;
}
that should stretch your div to the available area of the parent (considering it's not taking all the viewport in itself).
I am writing and app which needs to show a transparent image over the camera, for example as a guide for composition. The app has to be shipped at least on iOS and Android.
So far, I have found a plugin with a functioning iOS source (okstate-plugin-camera-overlay, available on Github), and a possibly working solution for Android.
None of these is satisfying, both compile and run with a host of warnings and quirks. I think I want to plan a new plugin with this functionality and a clean and minimal implementation.
Where could I look for directions for creating a lean plugin supporting both platforms and for a way of decorating the camera functionality in the least intrusive way on both platforms?
update
see the comments: I make a fork in cordoba-plugin-camera and made it work for iOS. Now I need directions to create a transparent overlay over the camera in Android.
update 2
I am using successfully the version of the plugin that Weston Granger has modified, and it has none of the problems that plague the original version.
It works for me on iOS and Android with equal smoothness.
This is the code I am using
I am using the version of the plugin that Weston Granger has modified
This is the relevant portion of code. It will show the camera behind an image.
CameraPreview.startCamera({
x: 0,
y: 0,
width: screen.width,
height: screen.height,
camera: "back",
tapPhoto: true,
previewDrag: false,
toBack: true
});
CameraPreview.setOnPictureTakenHandler(function (picture) {
savePicture(picture);
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
$("#clickButton").click(takePicture);
$("#switchCamera").click(CameraPreview.switchCamera);
$("#exitButton").click(function () {
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
Regarding the html template for the image, it is just a page with transparent body and an image. The image should have transparent area, if you want to see through the camera preview.
I have shown also the buttons, but this is code you should tailor to your needs.
<!-- camera.html -->
<style>
body {
background-color: transparent;
background-image: none;
}
div.cameraButtons {
position: fixed;
text-align: center;
background-color: black;
bottom: 0px;
width: 100%;
}
</style>
<div class="cameraContainer">
<img align="center" src="assets/{{frame_image}}" />
</div>
<div class="cameraButtons">
<a id="switchCamera" style="float: right; margin-right: 8px">
<i class="material-icons md-48" >camera_rear</i>
</a>
<a id="clicButton" >
<i class="material-icons md-48" >photo_camera</i>
</a>
<a id="exitButton" style="float: left;">
<i class="material-icons md-48" >backspace</i>
</a>
</div>
<!-- /camera.html -->
Im creating android application with the help of ionic famework.
Im having this problem with the UI.
Im using lists in ionic to show the today's deals given by the shops.
Im making the thumbnails as round by the property border-radius:100% , but when a rectangle image is placed my thumbnail is messed up. Its good when i use sqare images. But im creating this application which have to support all shaped images.
Find the screenshot below to know how rectangle image is responding with border-radius:100%
I want to get my thumbnails round in shape without being stretched. Image of expected list is given below
Is there any way to make the thumbnail in ionic framework as round ?
<div class="list">
<!--.....................loop........................................................-->
<a class="item item-icon-right item-thumbnail-left" href="#">
<img style="border-radius: 100%;" src="img/sample.jpg">
<h2>HEADINGG</h2>
<p>Details : Hey guys i saw that there was no thread for p300, so i decided to make one (this is the support and development thread) Do this at your own risk 1=Root your funbook It is rooted but sometimes it is not rooted so you must visit this page</p>
<i class="icon ion-chevron-right stable"></i>
</a>
<!--.....................loop........................................................-->
</div>
I think i have to do something with the CSS . I dont know what to do.
It's better to crop the square part of your images which you would like to display in your page in a circular-shape. That's because border-radius:100%; works like a charm for square-shaped images.
Here's a Live DEMO !
try using only avatar
it seems avatar css something like this,
.avatar {
border-radius: 95px;
}
<img class="avatar" src="img/sample.jpg">
also I guess u need remove thumnail clases
u can edit here
Fact:
Only square objects will be rendered as a circle with CSS border-radius: 100% or 50%.
So you have to give the image itself the same width and height.
...or I just didn't understand your problem^^
My suggestion is to set the border-radius with height and width.
<img src="" class="icon-round"></div>
.icon-round {
border-radius: 50%;
width: 100px;
height: 100px;
}
I created one page using HTML5, Bootstrap, CSS and Angular JS specially for Mobile. I tried to keep one form with one input field and one button (for posting message on the page), at footer which is fixed using CSS -
position: fixed;
right: 0;
bottom: 0;
left: 0;
margin-bottom: 0;
and this rules are applied on form's wrapper div.
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="row">
<a class="pull-right switch-venue" target="blank" ng-href="#" href="#">
<img alt="Switch Venue" height="25px" src="images/swithc-venue.png">
</a>
<div class="span12 powered-by">
Powered by <img alt="" title="" width="70px" src="images/footer_logo.png">
</div>
</div>
</div>
</div>
But here the problem is when I tried to access the page (with web address URL) on my mobile device Samsung Galaxy Y ST5360, and when I try to input some text inside the input text box, android device's keyboard is appearing and behind this the whole footer area (having form with input field and button) is hiding.
While this is working fine on some other Android device Samsung Galaxy S III, it is working fine, means the footer area (with form inside it) is not hiding behind the device keyboard while typing inside input text field.
Sorry, if I couldn't give the more specification about the problem. Please help for this hair pulling problem.
Thanks in advence.