<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
js
$('.parent').sortable({
axis: "y",
containment: "parent"
});
There is a problem dragging an element to the first position if containment is set to parent. I need this settings but I also need to move some elements to the top. But it seams that there is no space enough to do it. Sometimes it is possible but mainly - it's not.
I tried with adding top/bottom padding/margin to the parent - without success.
Any workaround?
Here is jsfiddle
you can try adding a 'hidden' element above, like so:
<div class='parent'>
<div class='children hidden'></div>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
with this for css:
.hidden {
visibility: hidden;
height: 0;
}
It won't release if dragged above the invisible element though.
here's a jsfiddle
Can you add a containing div and set the containment to it? e.g.:
<div id="outer">
<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
</div>
along with:
$('.parent').sortable({
axis: "y",
containment: "#outer"
});
and
#outer {
padding-top: 1px;
}
That seemed to work with the fiddle.
Related
Using Angular Material's flexbox I'm having trouble getting divs with margins and borders to line up.
I'm wanting to have a row with 3 boxes each taking up 1/3 of the horizontal space, followed by a row with 2 boxes - the first having 1/3 and the second having 2/3 of the space. This works fine if I don't have margins around the boxes but with margins it breaks.
How can I fix this?
HTML:
<body layout="column" ng-app="myApp" ng-cloak>
Borders of divs with margins don't line up
<div class="with-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
Borders of divs without margins line up fine
<div class="no-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
</body>
CSS:
body {
width : 100%;
background-color: #dedede;
padding: 2px;
}
div {
background-color : #c14543;
border: 1px solid black;
}
div.with-margins>div>div {
margin: 0 10px;
}
body>div,
body>div>div {
background: inherit;
border: none;
}
div.no-margins {
margin-top: 10px;
}
Here's a codepen demonstrating my issue.
http://codepen.io/craigsh/pen/ZWxGEQ
the problem is that margin takes extra spaces.
I think you probably just need to restructure your layout. does this work for you?
see http://codepen.io/anon/pen/NNYqLG
I replaced one div to span just to quickly avoid your div background css.
<div layout="row" layout-margin>
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row" layout-margin>
<div flex="33">Test</div>
<span flex="66" layout="row">
<div flex>Test33</div>
<span flex="none" style="width:15px"></span>
<div flex>Test33</div>
</span>
</div>
The idea behind is to make sure every row has the same structure, but each cell may have its own layout.
In JQuery Mobile you can easily group buttons horizontally by:
<div data-role="controlgroup" data-type="horizontal">
1
2
3
</div>
and vertically by
<div data-role="controlgroup" data-type="vertical">
1
2
3
</div>
but how can I make them group both horizontally and vertically?
Thank you!
Use a jQuery Mobile GRID.
<div class="ui-grid-b" >
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:
.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
margin: 0 !important;
}
Here is a DEMO
I try to implement tinyscrollbar (tinyscrollbar.js) into jquery mobile with data-role=page. On the first page it works perfectly fine. but on the second page, the bar is missing. until i clicked on inspect element. I tried tinyscrollbar_update(), update(0), slideToggle().promise()... non works. They all give me different kind of errors.
looks like this
<div class="scrollbar1">
<div class="scrollbar" style="height: 200px;">
<div class="track" style="height: 200px;">
<div class="thumb" style="top: 0px; height: 32.6530612244898px;">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">//text</div>
</div>
<div id="footerNavigation">
Back
Next
</div>
i copied the exact same code as above to my second page code:
<div id="theNextPage" data-role="page"><!--scrollbar code--></div>
and my javascript file:
$(document).ready(function() {
$('.scrollbar1').tinyscrollbar();
});
anybody has any idea how is that so? Any way to solve it?
I have found out away!
change the class into id.
class="scrollbar1" >> id="scrollbar1"
next page:
class="scrollbar2" >> id="scrollbar2"
$(document).ready(function() {
$('#scrollbar1').tinyscrollbar();
$('#scrollbar2').tinyscrollbar();
});
$(document).on("pageshow", "#theNextPage", function () {
var $scrollbar2 = $('#scrollbar2');
$scrollbar2.tinyscrollbar();
var scrollbar1 = $scrollbar2.data("plugin_tinyscrollbar")
$scrollbar2.update(0);
});
like this would be better
I have a jqueryUI accordion which looks great. I will have around 10 section (headers) which will just fit on the screen. However, on a smaller screen it will cut off some of my section headers. (I can already simulate this by shrinking the browser window). How can I have a scrollbar appear if the accordion headers don't fit vertically?
The accordion is wrapped in a div with no options set. It's as if a need a MIN height for the div to ensure all the headers can appear, with some room for the section content.
My full code is as follows:
<script>
$(function() {
$( "#settingsnavigation" ).accordion({
heightStyle: "fill",
clearStyle: true,
autoHeight: false }
);
});
</script>
<div id="settingsnavigation" style="width:220px">
<h3>General</h3>
<div>
<div class="settingsubsection">User</div>
<div class="settingsubsection">Security</div>
<div class="settingsubsection">Units & Ranges</div>
<div class="settingsubsection">Notifications</div>
<div class="settingsubsection">Vehicles</div>
<div class="settingsubsection">Device</div>
</div>
<h3>Financial</h3>
<div>
<div class="settingsubsection">Balance</div>
<div class="settingsubsection">History</div>
<div class="settingsubsection">Purchase</div>
</div>
<h3>Vehicle: Cadillac Seville STS</h3>
<div>
<div class="settingsubsection">General</div>
<div class="settingsubsection">Units & Ranges</div>
<div class="settingsubsection">Select Reminders</div>
<div class="settingsubsection">Edit Reminders</div>
</div>
</div>
CSS for the container div should be
overflow: auto;
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/