Fiddle: http://jsfiddle.net/RqE2p/
There is a list of sortable() inline text elements. The elements are "number one", "number two", ...etc. The problem with some of them (in my case e.g. "number five" and "number two", but it depends on current browser zoom I think) is that as soon as I start dragging it, the second word goes to the second line.
That's because the width of the element changes while dragging. In Chrome Inspector, Computed Styles, the "number five" width before dragging is 75.19999px. As soon as dragging starts, the computed width is 75px. So, the second word doesn't fit into the first line anymore.
For this example, I have problem only in Chrome. But in real life project, this happens in FF, too. I don't know, why in this example all is ok in FF.
Is there any simple method to deal with this, other than maybe making a javascript loop and setting each sortable element's css width to 1.1 times its current width?
You can adjust it directly with CSS without having to dabble in JavaScript:
The simplest solution would be to set a height for your ul lis and set no-wrap to make sure the text stays neatly on one line:
ul li {
height: 20px;
white-space: nowrap;
}
This should solve your problem :) Enjoy using sortable!
EDIT: Can you give more details; if the lis are set to white-space: nowrap; your text shouldn't go to a second line unless the CSS is being overwritten. If it is add an important tag to your white-space: nowrap; (eg. white-space: nowrap!important;). It's working on Chrome zoomed in 110 + %
Related
I am bulding a mobile project which has a number of modules having elements positioned as fixed. The issue which am facing is only on browsers running on iOS.
The exact issue is that whenever I tr to scroll over the body of the page having , say the bottom toolbar, as fixed, the whole fixed element moves respectively with the scroll, and once the scroll ends completely, then only it comes back to its assigned place.
I have given the body of the page a relative css rule.
Please help as this happens only on iOS.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
Please try this, source here
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
There is not really an easy answer to this as it has been a known issue on ios for a while (supposedly fixed in ios8) but this gives you a few ways to fix it: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it details all the issues with position fixed on ios devices and possible ways to fix it if you need to use it.
Add height: 100% and overflow: auto for fixed element.
Full example at https://codepen.io/astnt/pen/ExgOqeX
Safari allows you to scroll beyond the limits of the fixed div so that it can put in a nice bouncy effect. When you scroll past this point though, if there is a container that is scrollable, then subsequent touch events get handed off to this. Therefore scrolling does nothing for a bit until control gets handed back to the fixed div.
The fix is to give the container div the overflow-y: hidden style so that Safari does not hand off the touches, and we continue interacting with the fixed div.
None of the proposed solutions worked for me, although i had the fixed element inside the scrolling div (and moved it up), had no transform or other layer-creating properties on the parent elements (and created a layer on the fixed element) etc.
My solution was to just change the fixed element to be position: sticky;
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
I have a simple example where I am trying to drag an element inside another element with a fixed position. Once I drop the element inside the fixed (or absolute) position container, the element is no longer draggable.
Does anyone have any thoughts? I'm thinking this might be a bit of an issue if any fixed/absolute positioned containers cause draggable elements not to function properly. See my JS Bin.
http://jsbin.com/igiqan
This has actually nothing to do with the fixed position.
Your draggable element has a lower implicit z-index based on the DOM tree. So when you drag it onto the drag area, it is below it.
Give it an explicit z-index so it is frontmost:
.box
{
width: 20px;
height: 20px;
color: #c40000;
background-color: #c40000;
z-index: 100;
}
DEMO
I just implemented drag and drop sort table on my site
Demo Link
On chrome sometimes the rows border change colors specially the bottom one it turns black and its pretty buggy.
Works fine on IE and Firefox
I also notice that my row is very small when dragging and it's not the actual size of the of the row. Any work around for this?
I'm sure that has to come because you do not use any CSS Reset...
and by the way, you should add border-top: none; to your td, th style right after you set the border, so you don't have border with 2px as the bottom of one will be added to the top of the other creating lines with 2px's and not a smooth 1px in every tr
Here is an updated version: http://jsfiddle.net/U22Bz/3/
I'm using sIFR3 to render some text on a website. That site has print feature that will replace the page frame and leave only the text. An appropriate sIFR-alternate style for printing is set as well.
The problem I'm running into is that sIFR puts a CSS min-height as an inline style on the H2 that is replaced. And due to this setting, that seems to be calculated from the font-size given for that element, IE7 cuts off letters like gpq - letters that go below the baseline of the text.
I have tried and googled for a solution but couldn't find anything relating to this issue. Or how I could stop sIFR from setting the min-height value altogether.
You can test with any sIFR Text that falls back to Arial, for example, with a given height on the element it is located in (even non-pixel values).
Thanks and cheers
I had a look at a few projects i implemented with sIFR and i could not reproduce the error you described.
A few suggestions that maybe help:
You could try to work with padding
and margin instead of giving a
height value if that's possible.
Try to define line-height for the sIFR containing element. In both screen and print stylesheets.
Overwrite the min-height value inside the print stylesheet: selector{min-height:value !important;}
Are you sure that it is because of the min-height-style that the descender is cutted? Did you try to remove the style using e.g. Firebug?