view it on jfiddle. (you may need to add the frameworks: jquery 1.11.0, then tick the box for jquery mobile 1.4.4. I tried adding the resources for the versions I use (1.11.1 and 1.4.5 respectively -- but the pages don't render from their link. Sorry 'bout that.)
When I add data-position='fixed' to my footer on a page that has, a reduced width on larger screens (set with a media query in css) and a nav-panel that says open on larger screens using the data-display="reveal" or "push" (no problem with "overlay"), when I open the nav-panel (icon in upper left of header) the footer slides right as it should, but does not resize, and the contents are not centered. The re-sizing toggles if I click on the background, but the content never centers. I've settled on "overlay" as a temporary fix, but I'd prefer to use "reveal" (the default). Much of the CSS for the nav-panel is borrowed from the jquery mobile demos.
To duplicate the problem on the fiddle, use a wide screen and enlarge the output panel so that you see the gradient background, then click on the menu button (bars). After that you can see the footer slide (but not adjust its width) and slide back to an adjusted width (but not center the icons in the footer).
Any ideas what I did wrong or what CSS might resolve the issue?
Here's the html:
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
Contact
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li>Close Menu</li>
<li>Blah</li>
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
<li>Baz</li>
<li>Biz </li>
</ul>
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
<h3>Follow...</h3>
<p>Follow us on Twitter:</p>
</div>
</div>
<div data-role='footer' data-position='fixed'>
<div class='footer'>
Contact Phone:
Twitter
</div>
</div><!-- /footer -->
here's the css
/*css file for mobile website*/
#media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
.banner img{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto
}
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
#media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
#media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel- page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel- page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
#media screen and (max-device-width: 480px){
div.footer {
font-size: .75em;
}
div.footer a.ui-btn {
margin-top: 0.1em !important;
}
}
div.footer {
text-align: center;
/* font-size: .75em;
*/}
.footer-text{
color: #999;
margin-left:-8px;
}
/*popup dialog background color*/
div#popupSocialMedia, div#popupDialog {
background-color: rgb(237,237,237);
}
div#popupDialog .ui-content {
height: 50%;
}
div.ui-content { background-color: #f9f9f9 !important;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a {
background-color: rgb(10, 10, 10) !important;
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#media (min-width: 60em) {
.jqm-demos .jqm-header h2 {
padding: 1em 0 .7em;
margin: 0 1em 0 3%;
text-align: left;
}
.jqm-demos .jqm-header h2 img {
width: 275px;
height: 78px;
}
.jqm-demos .jqm-header p {
bottom: auto;
left: auto;
top: 50%;
right: 15%;
font-size: 1.2em;
margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
display: none;
}
.jqm-demos .jqm-search-link {
right: 3%;
}
.jqm-demos .jqm-footer p {
float: right;
margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
float: left;
margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
margin-top: 3em;
margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
padding-left: 12.5%;
text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
background: none !important;
border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
opacity: 0;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: -17em;
right: 17em;
}
}
I've omitted the javascript... from here and the fiddle.
Thanks for looking at this...
screenshot of the footer extended
...screen shot of the footer retracted after clicking on the background
The problem goes away if I remove "data-position="fixed" from the footer.
Posting my own answer at #twisty's suggestion. See his comments, too.
It turns out that since I found a different stackoverflow solution to keep my pages full size, my display is the same without data-position="fixed"... so I just removed it and all works as it "should". I'm curious to know why the footer doesn't work the same as the header, but don't want to spin anyone's wheels since I can now move forward without the issue
In case anyone wants to know where my 'fix' was, it's thanks to #ezanker, whose jfiddle shows the code: jsfiddle.net/zKS76/19 and Omar, whose answer to the op's question on so is stackoverflow.com/questions/21552308/…;.
#twisty suggests the reason that headers and footers behave differently: " When it is "fixed" it's removed from that wrapper and has a z-index of 1000, and is sort of stand alone from the rest of the page. "
Related
I am developing an Angular 7 web application and am struggling with a Mat-Selection-List where I allow the user to drag and drop the mat-list-option items.
Each mat-list-option item comprises a div which uses Flex Layout to arrange its components as follows:
<mat-selection-list #taskGroupSelectionList
cdkDropList
[(ngModel)]="selectedOptions"
(ngModelChange)="onNgModelChange($event)"
(selectionChange)="onSelectionChange($event)"
class="task-group-list"
(cdkDropListDropped)="drop($event)">
<mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>
<!-- Task Group Item -->
<div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">
<!-- Move Handle -->
<div fxFlex="32px" style="padding: 0 0 0 4px;">
<mat-icon class="summary-channel-handle">menu</mat-icon>
</div>
<!-- Index -->
<div fxFlex="24px;">
<p style="margin: 0; text-align: right;">
{{taskGroup.orderId}}:
</p>
</div>
<!-- Title -->
<div fxFlex="nogrow">
<p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
{{taskGroup.title}}
</p>
</div>
</div>
</mat-list-option>
</mat-selection-list>
The key CSS styles for this simple component are as follows:
.task-group-list {
width: 100%;
height: 100%;
display: block;
background: white;
}
.task-group-box {
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
border-bottom: solid 1px #ddd;
border-radius: 4px;
height: 48px;
color: rgba(0, 0, 0, 0.87);
box-sizing: border-box;
cursor: move;
background: white;
}
.task-group-box:first-child {
border: solid 1px #ddd;
}
.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Functionally I can drag and drop the list items, however when dragging, the mat-list-option checkbox which I have placed on the right checkboxPosition="after" moves to the top left corner and pushes the elements of the mat-list-option down.
Does anyone know why the layout changes on dragging please?
The element being dragged can be found as the last child of body in the DOM (only on drag), and this creates quite some problems as you can read here.
If your mat-list-option element is not very complex, only the checkbox and some text, you can solve this by adding some CSS to the global styles.css file, for example:
/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
display: flex;
align-items: center;
}
/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
margin-right: 10px;
}
You can see a DEMO in this stackblitz that I created.
If the content of your mat-list-option element is a bit more complex you will need to inspect the element and add the necessary styles. You can do this by dragging the mat-list-option and right clicking while dragging, inspect element and find classes that you can use to style it.
A better alternative might be to just create a custom cdkDragPreview. You can style this as you wish.
<mat-selection-list #movies cdkDropList>
<mat-list-option *ngFor="let movie of movies" cdkDrag>
{{movie}}
<ng-template cdkDragPreview [matchSize]="true">
<div class="movie-preview">
{{ movie }}
</div>
</ng-template>
</mat-list-option>
</mat-selection-list>
Important: The matchSize input is required to automatically size the item being dragged.
And since the css is scoped to your component, even when it's moved outside the DOM tree of your component it retains the style (assuming Emulated style encapsulation).
.movie-preview
{
line-height: 3;
padding: 0 1em;
color: hotpink;
background: white;
/* border (and hotpink color) are optional, based on your preference */
border: 1px solid #ccc;
border-radius: .5em;
}
That looks like this when dragging:
Try with ::ng-deep
::ng-deep .cdk-drag-preview .mat-list-item-content{
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
padding: 0 16px;
position: relative;
height: inherit;
}
this works for me
When resizing an image from left (using "n","w","ne","sw" or "nw" handles),
the parent's left and top positions are not affected, leading to a faulty behavior which can be seen in the following demo: http://jsfiddle.net/8VY52/1704/.
<div id="draggableHelper">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
$('#draggableHelper').draggable();
$('#image').resizable({
handles: "n, e, s, w, ne, se, sw, nw"
});
#draggableHelper{
border: 5px solid black
}
img{
border: 5px solid red;
}
You may want to consider something like this:
http://jsfiddle.net/Twisty/hukpwa3n/
HTML
<div id="draggableHelper" style="display: inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
CSS
#draggableHelper {
border: 5px solid black;
padding: 5px;
padding-bottom: 1px;
background: red;
}
img {
width: 100%;
height: 100%;
margin: 0;
}
.ui-resizable-handle {
border: 1px solid #000;
background: #fff;
width: 10px;
height: 10px;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}
.ui-resizable-nw,
.ui-resizable-sw {
margin-left: -1px;
}
.ui-resizable-nw,
.ui-resizable-ne {
margin-top: -1px;
}
.ui-resizable-ne,
.ui-resizable-se {
margin-right: -1px;
}
.ui-resizable-sw,
.ui-resizable-se {
margin-bottom: -1px;
}
JavaScript
$(function() {
$('#draggableHelper').draggable().resizable({
handles: "ne, se, sw, nw"
});
});
This allows the <img> to be 100% the size of it's parent and then you can resize the parent. Hope that helps.
I have some scss that I'm trying to use for an app. It works fine on my laptop's Firefox/Chrome/Safari browsers but blanks the page on an iPad's Safari/Chrome. I think it's related to the transform properties? Here's my code:
ol {
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
font-size: 15px;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
}
.rounded-list{
a{
position: relative;
display: block;
padding: .7em .7em .7em 2em;
*padding: .4em;
margin: .5em 0;
background: $light-gray-1;
color: #444;
text-decoration: none;
border-radius: .3em;
/*transition: all .2s ease-out; Uncomment here to add fade-in/out effect*/
&:hover {
background: $light-gray-2;
}
&:hover:before {
transform: scaleX(-1);
-webkit-transform: scaleX(-1); /* Chrome, Safari, Opera */
-ms-transform: scaleX(-1); /* IE 9 */
}
&:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 1.4em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
}
}
And the html looks like this:
<ol class="rounded-list">
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ol>
Any ideas as to why this would blank out an iPad's browser??
For those of you who have ever used the eBay app on a tablet device, you may have noticed that when you touch a product, the product view switches from a standard grid view like the following:
To a view like the following where all the products are moved to a left nav and the details about the touched product are put in the right area:
The thing that's really cool is the animation that transforms the view from one to the other.
Specifically, the product images shrink down a bit and then slide over to wherever they belong in the left nav. (This is much easier to see with the actual app than for me to explain.)
Anyway, I really like the animation, and I'd love to be able to create the same effect on a website using HTML/CSS, but I've had no luck.
I tried placing a bunch of divs next to each other on the screen and (with the click of a button) using CSS3 transitions to shrink the width of the containing div, but all that resulted in was the divs making a sudden jump from one location to another without any sort of fluid animation or movement, which I would ideally like.
If what I'm looking to achieve is impossible with just HTML/CSS, then that's fine, but I'd like to defer the question to those much wiser than me before I give you.
If anyone knows how to do this (or can conclusively tell me that it's impossible), I'd be very appreciative.
Thank you.
It is not difficult, just a little boring to do all the details
for this html
<div class="container">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<div id="elem4"></div>
<div id="elem5"></div>
<div id="elem6"></div>
<div id="elem7"></div>
<div id="elem8"></div>
<div id="elem9"></div>
</div>
I have prepared this CSS
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid green;
}
.container div {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lavender;
}
#elem5 {
left: 100px;
top: 100px;
}
.container:hover div {
-webkit-animation-duration: 3s;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
#elem5 {
left: 100px;
top: 100px;
}
.container:hover #elem5 {
-webkit-animation-name: an5;
}
#-webkit-keyframes an5 {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.33);}
100% {-webkit-transform: translateX(-133px) scale(0.33);}
}
#elem9 {
left: 200px;
top: 200px;
}
.container:hover #elem9 {
-webkit-animation-name: an9;
}
#-webkit-keyframes an9 {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.33);}
100% {-webkit-transform: translateX(-233px) translateY(33px) scale(0.33);}
}
I have set an array of 9 elements, that would fit an 3x3 grid.
And I have positioned the 5th and 9th of them where they should be, and created an animation to move them to the list position.
(Only webkit transforms)
There is left to create animations for the other 7 elements, and to elaborate the animations (with more keyframes)
jfiddle
As per your comment, an alternate way to do it.
The demo is prepared for a grid of 3 columns. Then, the key is to have only the first child of every 3 in flow; the remaining 2 are out of flow since they are positioned absolute. This allows us to create generic rules based in nth-child for the positioning of the elements.
Once you have the animations set, this style adapts to any number of elements (and you have only to set as many animations as columns has your design)
CSS
.container {
height: 500px;
}
.child {
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 90px;
box-shadow: inset 0px 0px 2px black;
}
.child:nth-child(3n+1) {
background-color: lightblue;
}
.child:nth-child(3n+2) {
position: absolute;
-webkit-transform: translate3d(100px, -100px, 0px);
background-color: lightgreen;
}
.child:nth-child(3n) {
position: absolute;
-webkit-transform: translate3d(200px, -100px, 0px);
background-color: lightyellow;
}
.container:hover .child {
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
width: 300px;
}
.container:hover .child:nth-child(3n+1) {
-webkit-animation-name: ani1;
}
.container:hover .child:nth-child(3n+2) {
-webkit-animation-name: ani2;
}
.container:hover .child:nth-child(3n+3) {
-webkit-animation-name: ani3;
}
#-webkit-keyframes ani1 {
0% {width: 100px; -webkit-transform: scale(1);}
50% {width: 300px; -webkit-transform: translate3d(-70px, -20px, 0px) scale(0.33);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -40px, 0px) scale(0.33);}
}
#-webkit-keyframes ani2 {
0% {width: 100px;-webkit-transform: translate3d(100px, -100px, 0px) scale(1);}
50% {width: 300px; -webkit-transform: translate3d(0px, -90px, 0px) scale(0.33);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -106px, 0px) scale(0.33);}
}
#-webkit-keyframes ani3 {
0% {width: 100px; -webkit-transform: translate3d(200px, -100px, 0px) scale(1);}
50% {width: 300px; -webkit-transform: translate3d(80px, -100px, 0px) scale(0.33) rotate(180deg);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -73px, 0px) scale(0.33) rotate(359.99deg);}
}
Reusable fiddle
(Only for webkit. Just for fun, added some rotation)
On an iPad you can do this with the CSS -webkit-transform property.
CSS
.menu-open {
-webkit-transform: translate3d(260px, 0, 0);
}
#main {
-webkit-transition: -webkit-transform 150ms ease-in;
transition: -webkit-transform 150ms ease-in;
overflow: visible;
width: 100%;
margin: 0;
padding: 0;
outline: 0;
border: 0;
top: 0;
left: 0;
position: absolute;
color: #333;
background-color: white;
display: block;
min-height: 100%;
}
#menu
{
position: absolute;
width: 100%;
position: absolute;
width: 259px;
top: 0;
left: 0;
background: white;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
display:block;
}
HTML
<div id="menu" style="display:none; background-color: #cccccc;">
<div>Text</div>
</div>
<div id="main">
<input type="button" id="menuToggle" value="Toggle" />
</div>
JS
function showMenu() {
$("#menu").show(0);
$("#main").addClass('menu-open');
}
function hideMenu() {
if ($("#main").hasClass('menu-open')) {
$("#main").removeClass('menu-open');
setTimeout(function () { $("#menu").hide(); }, 500);
}
}
$(document).ready(function () {
var body = $("#main"),
menuToggle = $('#menuToggle'),
menu = $("#menu");
menuToggle.bind('click', function (ev) {
ev.preventDefault();
if (body.hasClass('menu-open')) {
hideMenu();
} else {
showMenu();
}
});
});
See this JsFiddle for an example. Hope I understood you correctly (no iPad here at the moment).
I added a jQuery UI accordion here: http://www.letmagichappen.com/web_resources to accommodate a large amount of data. The accordion works fine, but the size of the content area is much larger than needed for the content.
I reviewed the css:
.web_resources .ui-accordion { width: 100%; }
.web_resources .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.web_resources .ui-accordion .ui-accordion-li-fix { display: inline; }
.web_resources .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.web_resources .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.web_resources .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.web_resources .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.web_resources .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.web_resources .ui-accordion .ui-accordion-content-active { display: block; }
The HTML is pretty straight forward:
<h4>Chapter 1</h4>
<div>
<p>Rotator Cuff Tears: Prospective Comparison of MR Imaging with Arthrography, Sonography, and Surgery</p>
<p>Magnetic Resonance Imaging of the Lumbar Spine in People without Back Pain</p>
<p>1.5 Tesla Surface Coil MRI of the Knee</p>
<p>Yoga Research Society</p>
<p>Radiological Society of North America</p>
<p>Sample 1</p>
</div>
Here is the code for the Accordion:
<script type="text/javascript">
$(function(){
$(".web_resources").accordion({ header: "h4" });
});
</script>
I would appreciate some insights into what is causing the content area to display so big and how to bring it under control.
Thanks!
This was much simpler than I thought. By default Accordion "auto-heights" to the largest div. To change that requires to set it to:
autoHeight: false