I have a <p> in a jQuery UI accordion that appears:
<p class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 184px " role="tabpanel">
Earlier, when I had several text links in there, it fit perfectly. However, now I have image links, and the images are sharply clipped.
I can duct tape the matter by adding additional <br /> tabs to get more space, but I'd like the accordion panel to include all images, one above the other, and correctly sized.
In If I understand your question correctly you need to tell the accordion to base its height off the content.
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
This is stated and shown on the jQuery UI site here: http://jqueryui.com/accordion/#no-auto-height
Hopefully this is what you are looking for.
I had the same problem with the jQuery Accordion, and I just found the fix!
Simply add this CSS code at the top of your page. It will override the auto crop happening on the thumbnails:
.ui-accordion-content {
min-height:auto !important;
}
Related
I'm trying to create a 4-pane layout using the jQuery-Layout plugin.
Really basic stuff:
The layout (note that I use iframes):
<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
<iframe class="ui-layout-south">Middle South</iframe>
<div class="ui-layout-center ">
<iframe class="ui-layout-center">Inner Center</iframe>
</div>
</div>
The initialization:
$(document).ready(function () {
$('body').layout({
west__childOptions: {
center__childOptions: {
}
}
});
});
Here's a fiddle.
Updated, simpler fiddle.
All is well until I try to resize the panes. It kinda works, but is very rough. When dragging the pane resizer handles it looks like they lose contact with the mouse pointer and stop resizing.
If the panes are simple divs, everything works, but not if the panes are iframes (which is what I need).
Any idea on how I could debug this?
I have found the answer here
Basically, you need to mask each panel (and its parents, in case of nested panels) that contains an iframe.
Like this:
$('body').layout({
center__maskContents: true,
west__maskContents: true
});
Here's the working demo of the fiddle from the question: click
I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes.
When I drag a picture out of the box it appears under all the other elements once it leaves its direct container.
While googling I was able to found to add:
helper: 'clone',
appendTo: "body"
This makes it so what is being dragged appears on top of all elements, but it leaves the original copy still in the box and I do not want that.
Is there a way I can make the element stay on top of everything when being dragged? I have tried a high z-index to no avail.
Here is a jsfiddle that shows the first draggle element behind behind the second. it is not an issue the other way around.
i am not able to change the position relative on the containing divs without breaking a lot of other things.
http://jsfiddle.net/cBWhX/6/
I found a few issues with your code, I think I've worked them out and got it working.
Working Example
First fix your HTML:
<div id="container1" style="background-color:red;padding:20px">
<div class="draggableContainer">
<div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer">
<div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer"></div>
</div>
Next You'll probably want to use the stack option:
$('.draggable').draggable({
revert: "invalid",
snap: ".draggableContainer",
stack: ".draggable"
});
$('.draggableContainer').droppable()
From the API documentation:
Stack
Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front.
Though there is an option - 'stack' existing while initiating draggables, but it is not working properly, So I have wrote a small library dragToFront playing with z-index. Following is the plunkr link
https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/
Stack wasn't working for me either. I was able to correct the z-index issue by using the appendTo property.
function setupDraggableFields($elements) {
$elements.draggable({
helper: "clone",
handle: ".field-sort-handle",
appendTo: ".section-container"
});
}
I am using jQuery UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.
I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/
If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the li-block.
<li class="ui-widget-content">
<div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>
<div class="lbl">Item 1<div>
</li>
Anyone an idea how I can avoid this?
I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.
<script>
$(function() {
$( "#selectable li" ).selectable({
filter: $('#selectable').children('li')
});
});
</script>
Here is an updated fiddle.
I thought the basic syntax for a slider was:
<div id="slider"></div>
$("#slider").slider()
But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.
Here's a fiddle: http://jsfiddle.net/yqNcn/
You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.
First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js
Then
Put Your Css Div Tag with id <div id="slider"></div> this Example
<div id="slider"></div>
then Call Jquery slider function....
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/