I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});
Related
I want to make children sortable inside parent on x-axis. It works but during moving an element rest of them changes their paddings or margins, i.e. they go bellow the active element.
<div id='parent'>
<div class='tagup'>EARTH</div>
<div class='tagup'>SUN</div>
<div class='tagup'>MOON</div>
<div class='tagup'>VENUS</div>
</div>
CSS
#parent{
padding:5px 10px;
background:lightgreen;
}
.tagup{
display:inline-block;
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
JS
$('#parent').sortable({
axis: "x",
containment: 'parent',
tolerance: "pointer",
});
Here is an EXAMPLE
How to keep them in one line during dragging?
g
Sortable sets contaner's height. Let's set height auto of tagup.
.tagup{
display:inline-block;
height:auto !important; //Add this line
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
Edit: The main issue is this: overflow: hidden and overflow: auto affect fixed positioned elements in iOS.
So if I have a fixed positioned modal dialog in a component within a scrolling feature of the page, that element is not displayed wherever it exceeds the bounds of its parent. This is really messed up, as it's not how fixed positioning works on any other system. So what's the official response to this?
Original post:
I have a modal dialog that works fine on desktop and Android, but on any browser on my iPad, the modal dialog, including the modal overlay, gets hidden wherever it exceeds the boundaries of its parent container (even though it is fixed positioned). I know that this isn't how overflow: auto is supposed to work, because it works just fine on all other devices. Anyone else experienced this? I'm sure it has something to do with how iOS handles fixed positions.
Anyway, here's some code:
HTML:
<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope">
<div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude="">
<div style="position:relative" class="ng-scope">
<label class="modal-close" ng-click="$ctrl.onClose()"></label>
<div class="page-heading">
<h2>Are you sure?</h2>
</div>
<input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()">
<input class="btn" type="button" value="No" ng-click="$ctrl.onClose()">
</div>
</div></div></div>
</confirm-dialog>
SASS:
.container {
overflow: auto;
.modal-window {
// overlay
#include transition(opacity 0.25s ease);
#include position(fixed, 0px 0px 0px 0px);
background: rgba(0,0,0, 0.6);
padding-top: 0.6em;
text-align: left;
z-index: 999999999;
margin: 0 !important;
.modal-bg {
#include position(absolute, 0px 0px 0px 0px);
cursor: pointer;
}
}
.modal-inner {
#include transition(opacity 0.25s ease);
background: $modal-background;
border-radius: $base-border-radius;
display: table;
margin: 70px auto;
max-height: 80%;
overflow: auto;
padding: $modal-padding / 2;
z-index: 1000000000;
min-width: 400px;
#media(max-width: $medium-screen) {
max-height: 70%;
padding: $modal-padding;
}
}
}
Here's the workaround we finally came up with--a new directive to replace ng-if on our modals that places the object on the body. Plays nicely with other Angular bindings too.
angular.module('app').directive('rootIf', function()
{
return {
restrict: 'A',
link: function (scope, $elm, attrs)
{
scope.$watch(attrs.rootIf, onChangeRootIf);
function onChangeRootIf()
{
if (scope.$eval(attrs.rootIf))
$("body").children().first().before($elm);
else
$elm.detach();
}
}
}
});
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
I have a scrollable div with the following css:
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
width:200px;
height:500px;
However on iOS devices, when the content inside of the div is wider than the div itself, x-axis scrolling is enabled. How do I disable x-axis scrolling?
I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden div and problem should be solved.
Markup:
<div class="scroll-container">
<div class="scroll-wrapper">
<div class="scroll-body">
</div>
</div>
</div>
Styling:
.scroll-container {
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 200px;
width: 500px;
}
.scroll-wrapper {
width: 200px;
overflow-x: hidden;
}
A really easy fix for this is just to make sure none of your elements are wider than the viewport. This can be accomplish by placing a "catchall" at the top of your CSS:
div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ...
{
max-width: 100%;
}