Ah, yet another CSS issue I'm having.
I'm attempting to use custom buttons, replacing a LinkButton with an image. I have the button working, but now the content below the button is not being pushed down. Have tried various things, but can't seem to find the answer.
Here's a jFiddle: http://jsfiddle.net/3hm5W/
Basically, the div id = sampleForm (the white form box) should start 5px after the div class = action-buttons. Currently the white box contains the red button.
All of the contents of your action-buttons are being absolutely positioned, which takes them out of the normal flow and makes the container have 0 height. Either get rid of the absolute positioning, or specify a height for your action-buttons div.
Related
I am trying to keep an element horizontally and vertically centered while it grows inside a container, but while also allowing you to scroll and see the rest of the growing element. I made a codepen that demonstrates my problem.
I am using transformX and transformY while also using position:absolute with left and right set to 50% as well. The goal is that when you click the grow button, you should be able to scroll up, down left and right and see the whole image. Currently something with the transform seems to be preventing you from getting back to the top and the far left of the image. Any ideas?
CodePen
EDIT
I am using flexbox instead now, but still have the same problem. Its visible in the updated CodePen.
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I'm using a "homemade" php calendar in my site's right sidebar. The site's body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here's a visual representation:
The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.
Thanks.
Edit: Sorry, I forgot to mention the way I'm making the boxes show up. It's entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They're kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.
I don't want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor's screen size.
For Javascript:
Check for the size of the document (to find the right most pixel)..
Check for the right most pixel of the box
Subtract box.right from document.right and move box left by that amount
For CSS:
Make the position of the box absolute and right: -10;
This is more a CSS / Javascript question.
First way: assign {position:absolute; right:0} to the popup div and {position:relative} to the containing div, so it will be floating to the left all the time.
Second way: use javascript / jQuery to calculate the right edge location of the popup div, modify the left if the div is going to poke out of the edge.
I'm having a problem with a textarea and submitbuttons in my form.
Here's a first screenshot of a seemingly normal situation:
And here's what happens if I set the textarea to have 30 columns:
The textarea just went right over the buttons. I'd expect the buttons to be pushed down. Or anything below it, for that matter. What do I need to set to make this happen?
Most likely (and you should show more CSS code to be sure) you have your labels/fields floated inside an element with fixed height..
Use an element with clear:both after the textarea..