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;
}
Related
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.
I've been trying to make a somewhat responsive layout for my website. But I'm late on the project and I've started it without one, which means my basic template has big flaws.
I'd like to know how can I make such template? I believe it would be really simple to make a template like this (in the picture) but I don't really know how as the divs seem to be moving as they wish, not as I command.
What I want from that picture is exactly what's written there. As the browser view port is smaller the divs should behave in the way I've exemplified in the image.
If anyway could point me out how to make such things I'd appreciate :)
Here is the link to the image: http://i.imgur.com/8n0TOlo.jpg
I'm the author of PocketGrid, a micro CSS grid for responsive layouts.
As Luca suggested, you can use PocketGrid to make your layout.
I did a JSFiddle for you : http://jsfiddle.net/arleray/5Mvph/
The HTML is really simple:
<div id="LAYOUT" class="block-group">
<div id="HEADER" class="block">
<div class="box">HEADER</div>
</div>
<div id="WORK_AREA" class="block-group">
<div id="LEFT_BAR" class="block">
<div class="box">LEFT_BAR</div>
</div>
<div id="CONTENT" class="block">
<div class="box">CONTENT</div>
</div>
</div>
<div id="TOOLBOX" class="block-group">
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
</div>
</div>
For your CSS, I suggest you to use the "mobile-first" strategy:
1 - Start with the "mobile" version (the smallest):
#LAYOUT { min-width: 800px; }
#HEADER { height: 30px; }
#WORK_AREA { width: 100%; }
#LEFT_BAR { width: 300px; }
#CONTENT {
overflow: hidden; /* Trick to fill the remaining space */
float: none;
width: auto;
}
#TOOLBOX {
min-width: 300px;
width: 100%;
}
2 - Then add media queries for larger versions (> 1100px) to only add changes from the mobile version:
#media (min-width: 1100px) {
#WORK_AREA { width: calc(100% - 300px); }
#TOOLBOX { width: 300px; }
}
For the fluid CONTENT width, I used the "overflow:hidden" trick to make it fill the remaining space of the WORK_AREA, after the LEFT_BAR.
Nevertheless, to make the WORK_AREA fluid with the fixed toolbar on the right, I could not use "overflow:hidden" (because it fills the remaining space on the right).
So I had to use the calc() function to compute the WORK_AREA width because of the right fixed-width toolbox.
Note: The calc() function is only compatible with Android 4.4+ (http://caniuse.com/calc) but it's the only mean (with pure CSS) to have a fluid WORK_AREA on the left of the right sidebar, because the TOOLBOX is declared after the WORK_AREA.
You may try using this calc() polyfill (in JS): https://github.com/CJKay/PolyCalc
To use the "overflow:hidden" trick instead of the calc() function, you should place your toolbox BEFORE the WORK_AREA, like in this other JSFiddle: http://jsfiddle.net/arleray/5Mvph/11/
For more information about PocketGrid, you can see many examples here: http://arnaudleray.github.io/pocketgrid/docs/
Hope this helps!
You can use media query in css refer media queries here or you can use framework like Bootstrap. This will help you to control divs based on devices sizes.
try bootstrap.It will make your life easy link is here.hope that helps
I suggest you another very very simple and minimalistic Grid system: PocketGrid. Only 1 KB minified. Loot at demos and description. ;-)
No one ever quite answered this similar question,
Blurry images on stock android browser
So I'm going to post my own version specific to my situation.
The problem is that position:fixed causes child image elements to be blurry in some android browsers. In my case, it causes the stock browser of Galaxy Note v1 running Android 4.0 to experience this issue. Others have said the same thing for some Galaxy S3. Here's my code:
Preview # http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
You'll notice that the OPTIX Testing logo is blurry at first. If you remove position:fixed from the #top-nav-container, then the logo is crisp and clear. So my question is, how do I keep both position:fixed and a crisp logo?
In my real website, the top navigation is supposed to stay fixed while you scroll through the site. I tried using position:absolute and using javascript to reposition the top navigation on scroll, but that caused a whole bunch of jumping/flickering effects. So if I can't use position:fixed or position:absolute to fix the top navigation to the top of a mobile web browser, what are my other options? How do other mobile websites achieve this result?
Additional Info:
I did some more experiments with the resizing image, changing view port, and changing the position:fixed/absolute and came to some interesting results. See below:
position:fixed no-background-size with-viewport - fuzzy
position:fixed no-background-size without-viewport - crisp
position:fixed background-size:20% with-viewport - fuzzy
position:fixed background-size:20% without-viewport - fuzzy
position:absolute no-background-size with-viewport - fuzzy
position:absolute no-background-size without-viewport - crisp
position:absolute background-size:20% with-viewport - crisp
position:absolute background-size:20% without-viewport - crisp
Here's how to read this chart:
first column states whether #top-nav-container is using position:fixed or position:absolute
second column states if i used background-size:20% or if i omitted it
third column states whether i included the <meta viewport> tag in the head
fourth column states whether the optix testing logo is fuzzy or crisp.
Looking at the results, you can see that the only time you get a crisp image with a container that has position:fixed is when an image has not been stretched or compressed via background-size or or with the view port. Also, the only time you get a fuzzy image with a container that has position:absolute is when an image has been stretched with background-size and with a viewport.
Using position: fixed is still a bad idea on mobile devices. The overwhelming majority of websites fall back to a static header for mobile views (ie. no floating navbar).
I experienced similar issues recently, as illustrated in this question.
A few resources for you:
Read this article on Quirksmode to learn about the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
See which mobile browsers support position: fixed in this table: http://caniuse.com/#search=fixed
add inside top-nav-container.
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add as replacement for Text if I don't want any Text on my action bar.
Sorry for my bad English :D
Instead of user-scalable=no change it to user-scalable=0
try this:
img {
transform: scale(1) rotate(0) translate3d(0,0,0);
}
<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->
add a "fixed" element follow the "fixed", just like up.
How would I position a popup above a fixed footer, just like it is depicted in the attached image?
http://i.stack.imgur.com/dADjb.jpg
Thanks.
Problem with jQuery Mobile popup is that x,y positioning is nit working correctly.
But we can cheat, take a look at this working example: http://jsfiddle.net/Gajotres/LSakj/
HTML :
Open Popup
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#footer-test" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!</p>
</div>
In this case, data position is set to footer id. Unfortunately this will place it over footer, so we need additional css to place it over footer.
CSS :
#popup {
margin-bottom: 30px !important;
}
You should change this value to accommodate your popup height.
well if you are using all jquery base, you could use jGrowl to create the notifications, just with a bit of work you will get a nice result.
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.