I'm working on an iPhone app where I'm using Pixate:
navigation-bar back-indicator {
background-image: url(backIcon.png);
background-size: 25;
}
This results in:
however its not centered with the Back text. How do i get the image to move down slightly?
Ive tried background-top-padding however that simply squashes the image down.
Any ideas? Thanks.
After playing around with padding options, it seems like anything larger than the default indicator height (22pts) cannot be pushed downward with padding.
If you want to create a smaller back indicator, you can account for an increased padding by adjusting the height (or width) accordingly, like so:
navigation-bar back-indicator {
background-image: url(custom_arrow.png);
background-size: 17 19;
background-bottom-padding: 2;
}
Also, it's worth noting that adding right padding to the back indicator will not move the back button text right, so you won't be able to fix the horizontal overlap in your particular example with padding on the back indicator. However, several examples from Apple drop the text altogether when using large indicators, so you might want to consider this as an option.
Related
I want to fit the Image + Label into Scrollable View.
It looks like so My setup
So trouble here is that width of the picture and the label did not match the screen width.
I tried to change the UIImageView width from 400 to 300 or so, BUT those changes either wont take the effect(if above 300), OR those changes make label disappear (with width setted up on 300 or below). Observe.
Funny thing is - label actually appears when you see view hierarchy, even though it looks kinda distorted. But no label on the iOS screen for you, sir.
I also tried to set equal width and height from the superview, but this option just disabling scroll, making view strictly fit the screen (label appears to be cropped)
I want the label to be nice and scrollable, but I also want to see it on the screen. Too much to ask?
EDIT: I just tried removing Auto-layout and got the same as with auto-layout. (click "Observe" link to take a look again, exact same situation) Could somebody explain why?
This is quite a simple fix. For the image, you should use equal width & center horizontally; however, make sure you use a fixed width. For the image to look nice, play with the scale modes - I find Aspect Fit/Fill work best.
The label should also be equal width & centered horizontally. You may need to calculate the height of the label programmatically if the text isn't always going to be the same size.
So the answer to my particular question was - shortening the actual text that is passed to the label.
Apparently UIScrollView can't handle stuff with crazy abnormal heights (I was passing a huuuge text to it) So in my particular situation solution was - shorten the text. Now it works like a charm (even though I still need to play a little with constraints to get rid of the warnings and stuff)
Long time lurker, first time asker! I'm unable to find what I want after a few nights of searching.
I'm looking for very standard bootstrap behavior.
Greater than/equal to 760px width resolution, I want fixed width.
Below 760px width resolution, I want the two lists to stack and take 100% width.
The problem is that above 1200px there is a different fixed width. I tried to fix this by making setting the .container class a fixed width, but then the sub 760px is also fixed --- no longer fluid. I've also tried using media queries.
Here's the code I'm working on: http://travelprobiotics.com/
Any suggestions?
thank you,
Evan Jerkunica
If you are hosting bootstrap yourself, you can't go wrong using bootstraps customization tool found here.http://getbootstrap.com/customize/
Look under the 'Media Queries Breakpoint' section and changed the screen-sm to 760px. (it is already defaulted to 768px so if you're OK giving away the 8 pixels, skip this step and use the code snippet below by itself.)
After that, add this snippet below in your own stylesheet, set the container to whatever width you want to be 'fixed'
#media screen and (min-width:760px) {
.container {
width: 960px !important;
}
}
I have the plugin working on a slideshow of images here:
http://samsweet.info/
I've uploaded all the images at the desired full size; all fall within 600 X 500 px. If I don't specify the height/width in the shortcode, the images are stretched and blown out to fill the entire content area. But when I specify the height and width in the shortcode, the images are not responsive and do not "shrink down" when the window is resized. Can someone guide me on how to get these images to (a) show up as they are at full size, centered and (b) resize properly in a smaller window/mobile device?
Any help appreciated!
If your slider is wrapped in a div, try just resizing the div with css. That way your images will keep their aspect ratio, but you can still use percentages (and max-width).
.slider-div{
width: 80%;
max-width: 600px;
}
This boggled my mind for a year and today I finally figured it out. It is the transition that is stretched. When I changed it to effect="none" it still worked and no more stretching. But the quick click buttons below the images no longer work. Ahhh...always something. But there's a clue at least.
There is a large amount of white space below my flexslider and I do not know how to remove. I have played with the CSS quite bit and nothing seems to work, without breaking the "responsive" behavior. Any help is greatly aprpeciated.
Regards...
Site can be viewed here, all code in located in the head tag:
http://destinjustlisted.com/new/
Your div which contains the slideshow items must have the class "flexslider." Various things are setup for that class in flexslider.css, which is part of the download. One of the CSS properties it has is "margin." You'll see three values there. It looks like this:
margin: 0 0 60px;
I don't know if you're familiar with this property format, but it's common in CSS when you've got 4 settings, as with margin, border, or padding (all of which have 4 sides). You can have up to four values which represent: top, right, bottom, left (like you're going around a clock dial, starting with 12 o'clock). So, for example:
padding: 0 1px 0 2px;
would give no padding on the top and bottom, but 1 pixel on the right and 2 pixels on the left.
The flexslider CSS has 60 pixels of margin on the bottom. That leaves room for the navigation buttons if you want a visual representation of where you are in your slideshow or for you to select a specific slide. Unfortunately, if you set the property "controlNav" to "false" when you're setting up the plugin if you don't want to show those "buttons," then you just end up with the big blank area under the control. If you just set that property to this:
margin: 0;
all your problems will be solved!
If your images are different sizes (heights in particular), the Flexslider container will display as high as the tallest image. This can create the gap that you might see.
If this is the cause, resize your images in advance so they all have the same heights and widths.
Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;