Here is an excerpt from my code:
xtype: 'image',
src: 'http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png',
left: '50%',
top: '30%',
height: '3.515625%',
width: '13.28125%'
The image is cutoff - only a small chunk the size of my Image object appears. How do I fix this?
Try the config "mode: 'image'", this will embed your image in a img tag, respecting your width and height. Or set the background-size in CSS
Edit: also, are you converting a layout in pixels to %? Im currently doing the same thing except in em. Kinda a pain in the a**. Got any useful tips?
Related
All other products thumbnails are equal in size, but for some reason one specific products thumbnail image is noticeably larger than the other ones. We've adjust the image size on photoshop to mirror the others and it's still bigger. We even lowered the image size about 30% smaller than the other products images and it's still loading up equally big. What can we do to fix this?
at custom.css
find
.item-feature-product .ProductImage img {
max-height: 650px;
width: auto;
}
replace with below CSS
.item-feature-product .ProductImage img {
height: 350px;
width: auto;
}
I have a question about Swiper and how to display a loading animation in a responsive environment.
It's Swiper Version: 3.4.2.
What I did
Hi, I have set the .swiper-container to
{ width: 100%; height: auto; }
because the site is responsive.
Otherwhise I use the standard swiper.min.css and swiper.min.js with these settings:
autoheight: true,
grabCursor: true,
slidesPerView: 1,
autoHeight: true,
keyboardControl: true,
paginationType: 'fraction',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
Expected Behavior
I would like to have the container set to the height of the first image and have a loading animation displayed in the middle of the container until the images are loaded.
Actual Behavior
The swiper-container is only the height of the arrows. Then next thing you see is the cropped first image (the size of the container which is the size of the arrows), and only after that, the container is set to the size of the first image.
I would really appreciate some help.
Thanks
Stefan
Have you tried Lazy Loading?
The slideshow(/browser) will be unable to determine your slides height until the images have loaded, so you may have to manually determine the height of the image on the first slide and initialize the container with that.
See the Images Lazy Loading demo.
I have a Cross-Platform app.
I use percentages to keep the aspect of the app similar for every screen size.
So i put a view height to
var view = Titanium.UI.createView({
borderRadius:10,
backgroundColor:'red',
height:"100%",
});
window.add(view);
The problem come when i show the keyboard.
The view is auto resized.
So i need that the keyboard goes OVER the view without resize it.
Note: If i use "dp"/"dpi" the height of the view is not the same in different screen devices.
Any suggestion?
I did not have this problem before, but there are several options having the same effect as 100% height:
height: Ti.UI.FILL
height: Ti.Platform.displayCaps.platformHeight
or you could achieve the same by setting the values for
left: 0, right: 0, top: 0, bottom: 0,
All of them should make a view fill the screen.
Please note that it might be necessary to handle orientation changes.
first you need to set top property then if it does not work then also set height with platformHeight.
It's not clear what your complete view looks like. Your example doesn't have a text entry type control which is what would trigger the keyboard opening.
You can create a separate view that contains the textArea and set this 2nd view with fixed positions. Then the main view should stay put.
I have drawn a circle in Titanium using the following code.
var wheelTop = Ti.UI.createImageView({
width: 100,
height: 100,
borderRadius: 50,
borderColor: '#1a0033',
backgroundColor: '#8400ff'
});
Now, I would like to divide this circle into 24 segments and create a separate property for each segment.
How can I do that ?
Perhaps you should use a WebView containing an HTML canvas.
I've also read that the Raphaël js lib (http://raphaeljs.com/) using SVG can be included in Titanium:
http://developer.appcelerator.com/question/15861/using-raphaeljs-js-drawing-library-in-a-mobile-app
If a webview is not an option, you could check out some modules in the marketplace:
https://marketplace.appcelerator.com/apps/4967?1054292716
https://marketplace.appcelerator.com/apps/5941?416198363
I have a carousel with images but the images appear to the left of the screen, other than that it works perfectly. I have tried putting the images inside a div with the style:
margin:0 auto, width: 300px;
but that doesn't work. I've tried various other things, such as playing around with different classes:
.x-body x-carousel-item{
margin:0 auto; width: 264px;
}
But it never works quite right.
new Ext.Carousel({
items: [
],
height:200,
dockedItems: [myapp.toolbars.vehicleInfoToolbar],
indicator: false,
})
Items are added to the carousel dynamically, an example item is
new Ext.Panel({ html: imagearray })
Where imagearray is a standard tag.
Many thanks for any help on this, I've seen this problem on another forum without answer, hopefully someone here can shed some light on this one.
To set the padding inside the carousel's body use the bodyPadding property or wrap the image tag with div and set the text-align:center for that div.
What I did is specify a CSS class called "carouselImage", which sets "background-position: center;", and then I just specify via 'cls' attribute in the view config, or via setCls() method for the components to use that CSS class.