I want my page to look like this:
http://jsfiddle.net/yuA5Q/3/embedded/result
However, I am implementing jQuery ui to utilize the draggable(and sortable) functionality. So if I don't make .bubblescontainer display: inline-block, I get some horrible effects on dragging. however, with it, I get this:
http://jsfiddle.net/yuA5Q/4/embedded/result
So, is there a way to keep the inline-block while wrapping the bubbles as desired?
Updated jsfiddle.net links. I missed the final }); in the code so it wasn't running.
I achieved this by floating the internal containers (.bubblecontainer) left, and clearing left.
float : left;
clear : left;
http://jsfiddle.net/yuA5Q/5/
Related
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
I have some nested recursive functions which dynamically create collapsible with listviews that are in a side panel. I found the default 17em to be too small, especially as the nested text starts to get short. So I found the styles in the css which set it and I overrode those to use 25em. This might be a bit too much after testing on some devices. However I digress.
The thing I am here to ask is why my collapsible overflows the panel when I use data-display="overlay", when I set it to 'reveal' it looks fine. I thought it might be all my nested content, so I made a fiddle with static content here: http://jsfiddle.net/LF6UR/
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-position-fixed="true" data-swipe-close="true" data-dismissible="true">
and I can see it is not that, perhaps there is some other CSS property for the panel that I am not aware of. There seem to be lots of niggly little settings to get to know with this framework. Hope someone out there can help because I really think 'overlay' is better than pushing my main content area.
jQM adds a negative left and right margin to collapsibles within the collapsible set. You can override the margin like this:
.ui-collapsible-set .ui-collapsible{
margin-left: 0;
margin-right: 0;
}
Updated FIDDLE
Also, changing your collapsible set to data-inset="true" fixes the issue.
a solution without setting collapsibles to inset...which is important because I have nested collapsibles is to simply set the 'magic' .ui-panel-inner class which JQM puts in as an 'enhancement' but which makes it a bit difficult for traditional webdevelopers to know to apply styles to their controls.
.ui-panel-inner {
/*width: 25em;*/
padding: .2em 1.2em;
}
http://jsfiddle.net/magister/LF6UR/8/
I really need some help getting a sticky footer with scroll. I have been researching this for a really long time and trying a bunch of stuff. But nothing worked quite right for what I need.
Heres the site
What I need is a footer that stays at the bottom, even when the window shrinks and the panels overflow that when I scroll down, the footer doesn't go up. But I also need to have liquid heights.
Can anyone help me?
You can use twitter bootstrap. Have a look at this.
Your options are essentially to use a framework(twitter-bootstrap and zurb-foundation are both good options) or to write your own javascript/jquery to move the footer as you scroll. Check out this page: http://api.jquery.com/scroll/ You could do something like this:
$('#body').scroll(function(){
$('#body').append('#your_footer');
});
Obviously, this is borderline pseudo-code but it might be a good jumping off point if you don't want to load an entire css framework just to scroll a footer.
So I figured it out without using bootstrap or JQuery.
I need this:
body > #main {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0px;
}
as well as adding absolute positioning to footer elements to prevent them from getting pushed down.
Well this is a very strange issue, for whatever reason slider handle is outside it's parent element by half it's height or width, why did they made it that way?...
Anyways, you can see in this fiddle: http://jsfiddle.net/PGLkW/2/ that handle goes way outside it's container, and if i would try to remove margin like so:
.ui-slider .ui-slider-handle{
width:100%;
margin-left:0px;
left:0px;
margin-bottom:0px;
}
Things get's even worse, and from what i can see i would actually need to edit widget itself for such a stupid thing, or am i not seeing something?
So just to clarify my question, i want handle to stay within it's container, and when i click on any place to start dragging as you can see mouse doesn't go exactly to the middle of handle, so it looks really bad.
It looks it doesn't read the css properly, or because there are a lot of solutions they left it for the developers to play with it, and you have to do it until you get the result you want, here there is a solution using margin-bottom in negative:
//CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
width: 58px;
height: 50px;
margin-bottom: -25px;
}
//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>
The fiddle http://jsfiddle.net/RFVZ2/ . I hope this works for you.
The solution is described in this bug report ("this is as designed"): http://bugs.jqueryui.com/ticket/4308
For horizontal slider I used:
.ui-slider-handle
{
height: 24px !important;
margin-bottom: -6px !important;
}
I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect.
This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two.
But when I attempt to flip a larger element...namely the entire screen, I get redraw glitches. What happens as soon as I swap the css class to start the transition, parts of the 'bottom' div pop-through the 'top' div, then the flip happens, then they pop-out again. And it's not the entire element that shows through...it's half of the element split along the axis that I'm doing the translate 3d rotation on.
Any ideas or theories as to what might be causing this? It happens the same both on the iPad as an app and on the desktop in Safari, so appears to be a webkit issue.
Could it be some CSS issues? Or is attempting to do a full-screen translate3d rotation with complex nested elements with large background images just more than Safari can handle?
UPDATE 1:
I've made progress in narrowing down the issue.
What's happening is that the elements that are 'peeking through' when I do the translate3d flip happen to be child elements that had been previously positioned via translate3d.
My 'page' structure that I want to transition with translate3d:
<div id="frontbackwrapper">
<div id="front">
</div><!--/front-->
<div id="back">
</div><!--/back-->
</div><!--/frontbackwrapper-->
This works on it's own. The front div is replaced with the back div with a card-flip effect.
The problem is that prior to doing the full page flip, I've already animated some elements within the #front div using translate3d:
<div id="frontbackwrapper">
<div id="front">
<div class="modal"></div>
</div><!--/front-->
<div id="back">
</div><!--/back-->
</div><!--/frontbackwrapper-->
Example CSS:
.modal {
width: 800px;
height: 568px;
position: absolute;
left: 112px;
z-index: 100;
-webkit-transition-duration: 1s;
-webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
}
.modal.modalOn {
-webkit-transform: translate3d(0,80px,0); /* slides the div into place */
}
If--instead of using translate3d--I just reposition the div with a top style or transform the top property, I don't get the peek-through issue. Of course, that means I have to give up the slick animation or hardware acceleration, respectively.
At this point, it looks like a webkit bug. I'll keep doing some playing with it. If anyone has run into this before and found a workaround, I'm all ears!
solution! After a night of sleep, I mulled over the culprit and what to do with it. It's not necessarily the act of animating a child element with translate3d but rather the face that the element that was translated has that CSS property at the time it's parent is being animated with translate3d.
The fix is to first animate the child element, then remove the translate style all together.
The CSS structure is now:
/* default class for the start of your element */
.modal-startposition {
-webkit-transition-duration: 1s;
-webkit-transform: translate3d(0,-618px,0);
}
/* add this class via jQuery to then allow
webkit to animate the element into position */
.modal-animateposition {
-webkit-transform: translate3d(0,80px,0);
}
/* when animation is done, remove the above class
and replace it with this */
.modal-endposition {
top: 80px;
}
And some sample jQuery:
//[attach a click event to trigger and then...]
$myModal
.addClass("modal-animateposition")
.on('webkitTransitionEnd',function () {
$myModal
.removeClass('modal-startposition')
.removeClass('modal-animateposition')
.addClass('modal-endposition');
});
A little tedious, but it completely fixes the screen redrawing problem.
EDIT: Corrected a typo
DA,
I learned something from this, thanks. Also,
take note of the css attrbibutes, 'translate3d' and 'left'. Translating and positioning is a little different. Test it out, translate an element 100px in x-axis, set it's 'left' style attribute to 0px. Verify, it will be positioned at 0px on x-axis from the current translation point (starting from 100px on x-axis).
That produces mathematical errors in drag/drop and animation algorithms and easily noticed (redraw glitches, skips, position getting reset), and becomes a challenge because translate3d no longer updates the elements offsetLeft or 'left' style attribute (to prevent reflow, for optimization), so parsing the elements real left, is based on knowing if translate3d or left was being used. If you're a game developer, tracking the x,y in internal variables is the way to stay in synch with the elements position. Hope that helps out more.