How do I adjust the height of the pikaChoose plugin without ruining the width?

Tags: css,grails,plugins

Problem :

I was religiously following this tutorial: on how to add an image gallery feature in grails. It works great and all, but I wanted to adjust the height of the main (big) image. I did it successfully, but when I upload an image which exceeds the default width, it ruins the whole layout. Like, a part of the image will overflow from the rest of the layout. I guess it's more of a css problem.. and I suck at CSS. The code is below. A good demo can be seen here: Note that if I change the width to 100%, it's the height that becomes inconsistent. :(

*upload an image if there's none and see for yourself.

Anybody wanna help me? :D

I offer free cookies. :) :)

@charset "UTF-8";
/* Just for the example. Fee free to delete these three lines */
body{font-family:Helvetica, sans-serif;}
.pikachoose {width: 800px; margin: 20px auto 20px auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; margin-top: 10px; width: 100%;}
    .pika-thumbs li{ width: 144px; height:74px; margin: 5px; padding: 2px; overflow: hidden;
        float: left; list-style-type: none; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
    .pika-thumbs li:last {margin: 0;}
    .pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 800px;}
.pika-stage {overflow:hidden; position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:400px;}
.pika-stage img{height:100%;}

Solution :

From looking at the demo, it looks like the stage for the main image is 800px so just add a max-width for your images that appear on the main stage:

.pika-stage img { height: 100%; max-width: 800px; /* Same width as the main stage so images don't stretch past */ }

    CSS Howto..

    How to set the style of the message in an SWT Text field?

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    CSS how to vertical align div in a div against a sibling div (inline-block)

    CSS: How can I make the pop over menu clickable?

    how to use dialogClass option in jquery dialog with an external CSS file

    Hide/Show Load function now working

    How to make a TableLayoutPanel like resizable div in html

    How to build flexible structure?

    Slide up/down effect with ng-show and ng-animate

    How to edit a css file in ASP.NET using C# to change the website design

    How do I add another tab using CSS3? Noy Hadar

    CSS/Javascript show image remove x on mouseover/hover

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    How do I keep my text on one line in Firefox?

    ExtJS - How to customize buttons?

    how to center text and control user zoom in CSS

    How to remember style changes?

    .show() not working on page load

    how to style simple_form with material design or custom css

    How to apply more than 1 CSS styles in javaScript? [duplicate]

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How to Center an image on top of another image using CSS?

    Show div when hover another div using only css

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to apply only one css file out of two css files included?

    How to force spaces between 2 elements when position:absolute with CSS only?

    How to write a CSS hack for IE 11? [duplicate]

    How to make width of element full width of screen and not parent css

    how does CSS determine which way to animate a transition?

    How can i get spaces between images with the same class?