How do I get rid of the extra space between each collapsible below? (see image link below)
- I'm trying to save screen real estate and need them to be stacked on top of each other.
Note: Each of my collapsible's (ex. Email, Une, Resold) are independent, and can be left opened or closed at will (Non-Accordion type).
https://dl.dropbox.com/u/58096637/jqm_collapsible2.jpg
Here's an example for you:
This is jQuery code used:
// Remove space between collapsible elements
$('div[data-role="collapsible"]').addClass('new-class');
// Remove rounded corners
$('div[data-role="collapsible"] h3 a').removeClass('ui-corner-bottom ui-corner-top ui-btn-up-c').addClass('ui-btn-up-c-custom');
// Fix borders so collapsible elements can overlap properly
$('div:last-child[data-role="collapsible"] h3 a').addClass('ui-btn-up-c-custom-last');
Related
I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.
I just discovered that text inputs within a div with data-role="fieldcontain" don't expand to the 100%, but if you place a text input outside of a fieldcontain it expands to the fullest. This is a bug that they are fixing, but meanwhile...
So I was wondering what is the use of that data-role="fieldcontain" in the first place? Why to put it? I saw it on the documents and I just put it in my html, but what is the use of putting it?
Thanks!
Looks like it's a Field Container for Grouping and Display
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
Field container Container with data-role="fieldcontain" wrapped around label/form element pair
Controlgroup DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled
inputs of a single type (checkboxes, link-based buttons, radio
buttons, selects) into a group. For grouping form checkboxes and radio
buttons, the fieldset container is recommended inside a div container
with the data-role="fieldcontain", to improve label styling.
data-mini true | false - Compact sized version for all items in the
controlgroupdata-type horizontal | vertical - For horizontal or
vertical item alignment
As of jquerymobile 1.4 data-role="fieldcontain" is deprecated!
use class="ui-field-contain" instead.
see release notes http://jquerymobile.com/changelog/1.4.0/
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard
does any one know if there is an example available for sliding panels in jquery? If so, can someone send me a link? This is what I want to accomplish.
On my main screen I want to have three divisions. One right column that covers half the screen and then the left column divided in two rows. I want to expand and/or shrink the right column and/or left column and/or the top row in the left column and/or the bottom row in the left column.
Think og it as an IDE with the left side of the coding area and right side as project explorer and the properties. The coder would like to see any three of the sections at once or would like to expand each working area.
I am looking for a jquery solution for such!
Thanks
Sounds like the way jsfiddle.net works
This is available as a plugin. http://docs.jquery.com/UI/Resizable
You could also use the jQuery splitter plugin: http://www.methvin.com/splitter/
Also see (2011): http://jcubic.wordpress.com/2011/03/06/jquery-splitter-split-container/
Flexigrid is a new (2012) option: http://flexigrid.info/
The most robust solution for this is to use the jQuery layout plugin. You can find it here: http://layout.jquery-dev.net/
I have an unordered list with links. The links have display:block; in the css so the hover will also have effect in the padding surrounding the links. I replace the list-items with sIFR 3. In the sifr-config.js I specify a hover color for the text but this only works on the text itself, not on the padding surrounding the text. Is there a solution for this problem?
I got it working for the padding on the left side of the text by adding margin-left:'25' in the config for .sIFR-root but margin-right doesn't have the same effect. Help greatly appreciated ;-)
It's hard to say based on your question, but if you replace the individual list items, the entire list item will be a sIFR link. If you want more space around the text you should do this within the Flash movie rather than in CSS. You can use the tuneWidth, tuneHeight, offsetTop and offsetLeft parameters for this.