I am trying to set the max-height attribute using CSS so that I can get the maximum height to 175 pixels and the reducing pane with no of elements present in it.

I am trying to set:

.prodGroup{
     max-height : 175px
}

The height of the pane is reduced to no of element present in the pane but when the elements in the pane increases dynamically its size remain the same as it was set for first selection. Ideally it should increase to the no of elements present in the pane.

HTML

<div class="accordion" id="prodGroup">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#prodGroup" href="#prodGroup1"><i class="icon-chevron-down icon-white"></i></a>
                </div>
                <div id="prodGroup1" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <ul class="scroll-pane-mg pt-subsearch">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li> 
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- End of Select Product Group Accordion -->

This code for the list is generated dynamically, but the maximum size of this list will be 175px. This list should be shrink if the content is less than than 175px height but should not grow more than 175px.

CSS

.prodGroup ul {margin: 0px; width: 100%; overflow: scroll; height: 175px}

Now the above list is dynamically generated and I want to keep its maximum height to 175px and if the content

I am trying to set the max-height attribute using CSS so that I can get the maximum height to 175 pixels and the reducing pane with no of elements present in it.

I am trying to set:

.prodGroup{
     max-height : 175px
}

The height of the pane is reduced to no of element present in the pane but when the elements in the pane increases dynamically its size remain the same as it was set for first selection. Ideally it should increase to the no of elements present in the pane.

HTML

<div class="accordion" id="prodGroup">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#prodGroup" href="#prodGroup1"><i class="icon-chevron-down icon-white"></i></a>
                </div>
                <div id="prodGroup1" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <ul class="scroll-pane-mg pt-subsearch">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li> 
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- End of Select Product Group Accordion -->

This code for the list is generated dynamically, but the maximum size of this list will be 175px. This list should be shrink if the content is less than than 175px height but should not grow more than 175px.

CSS

.prodGroup ul {margin: 0px; width: 100%; overflow: scroll; height: 175px}

Now the above list is dynamically generated and I want to keep its maximum height to 175px and if the content

• javascript
• html
• css

• 8 Could you edit your question and add some markup (and additional CSS) so it's a repro of your situation? In addition it would help if you show the various solutions you've tried so we can get a better idea of what you're after. (Note that you can edit your question to add more details.) – Jeroen Commented Nov 26, 2013 at 8:42
• You're missing a semicolon. – Patsy Issa Commented Nov 26, 2013 at 8:44
• You are looking for min-height in the stead. – Abhitalks Commented Nov 26, 2013 at 8:44
• What type of content goes within this element? That's pretty important – JAL Commented Nov 26, 2013 at 8:48
• @PatsyIssa Technically speaking you do not actually need the trailing semicolon on the last line of CSS – Terry Commented Nov 26, 2013 at 9:34

2 Answers 2

min-height 

is the syntax so your code looks like:

.prodGroup{
    min-height: 175px;
    background-color: black;
}

or as your original code:

.prodGroup{
    min-height: 175px;
}

JSFIDDLE

or is this not what you are meaning?

You were styling a class in your stylesheet, not an id

#prodGroup{
     max-height: 175px;
     overflow-y: auto;
}

It's hard to grasp what you are looking for, try to create a fiddle This is my example where I styled the id for you