I'm trying to add a side rectangular div to fancybox that would float to the left of the image (same height), and have multiple placed text fields(h1's and p's), if that makes sense?
I searched around on stack overflow and couldn't find a similar question. If you know of a thread point me there!
Related
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
Can someone explain what the space colored in orange means?
Firstly, I considered it was margin spacing but than I saw that the margin actually equals zero.
Screenshot (Sorry, I can't yet post any pictures on Stackoverflow)
Thanks in advance.
I think it is still margin. Almost everywhere it is displayed correctly and Chrome itself says it is a margin. So I would say it is a margin with a rare bug in there.
The item you have highlighted - <p> - has no margin or padding which is why it is showing as zero in the diagram at the bottom. The orange area is actually the area of the container div 'hist'. If you highlight the containing element using the same tool you will probably find that it has some padding-right which is causing the empty space (or rather, filling it with padding so the text can't enter it), or your <p> has a maximum width set which is causing it to have the empty space, or wrap before it reaches the edge.
I want to create a custom panel/layout and it's seeming pretty impossible at this point. I need the components to start in the upper left corner and stack downward until they fill the panel vertically, then wrap to the top of the next column and so on until they eventually fill the screen and create a horizontal scrollbar. After an entire day of trying I've decided it's only possible by abusing GWT (and I assume the whole web browser) adding crippling complexity and terrible performance. Please let me know if I'm missing something and layout like this is possible. Thank you!
Lame solution: Have a small (almost invisible) AbsolutePanel where every string is displayed within a div and measured (getClientWidth/height()). Then each panel can calculate it's size based on the strinsg, borders, padding, etc. it contains. Once each panel knows it's size, they can be layed out relative to the sizes of the other panels in the contianer.
Check out FlexTable, which allows you to specify the row,column for the widget to be added
Im using the jscrollpane jquery plugin. My content are images that expand when you mouse over them, and shrink back to normal on mouseleave. What I need if for the images to be able to expand over beyond the scroll bar and remain visible while expanded.
By giving the images a z-index I can get them to expand over the scroll bar handles, but im struggling to get them to expand any further.
If I set a number of elements to having overflow visible I can get it to work, but then I have browser scroll bars at the bottom of the screen.
Can I have the images visible when they expand but no browser scroll bars?
Thanks
Answer from:
http://groups.google.com/group/jscrollpane/browse_thread/thread/8073378d51551efa
Hi,
If I understand correctly you want your images to expand out of the
bounds of the scrollpane "box"? That won't be possible in a simple manner.
A workaround might be to do something like this:
* On mouseover clone the image that is rolled over and attach the
clone to the body with position: absolute.
* Use jQuery to figure out the position of the image you cloned with
respect to the body (a loop with offsetParent will be your friend
here).
* Apply this position to the cloned image so that it is sitting
directly above the original image then expand it.
* Listen for the mouseout event on the cloned image and when this
happens the shrink the cloned image and then remove it from the body.
Hope it helps,
Kelvin :)
I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.