enter image description here
I have added this check button into the card, and added position into it so I can put it in the corner on the left, but when I get the button out of the card corner I got disappear , even when I use z-index!
That's because you have overflow: hidden; set for the .note-card. If you want to keep it, you will have to move your check outside that container or switch to overflow: visible and deal with the cut-off text differently, either by making the box taller, shortening text, or wrapping that text in another div that then would have the overflow: hidden to just cut off the text.
The button disappears because you have the overflow property set to hidden on the .note-card element. Try setting this property to visible.
Also providing a code snippet can allow others to help you in a better manner as screenshots of code are not that helpful.
Related
I need my text to wrap my image which works fine until I set the text overflow the hidden. The reason I need to set it to hidden is because it's going to be half hidden at first. I tried switching back and forth between visible and hidden but it causes nasty visuals.
What can I do to use overflow:hidden an keep the integrity of the float?
A fiddle example of the overflow "bug"
What you could do is set the overflow: hidden to the parent container and then toggle that property to expose more text.
For example: http://jsfiddle.net/audetwebdesign/D8QUg/
However, you need to size the div carefully so that the lines don't get cut off in the middle of the character height.
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I've created a sample on jsfiddle
So if you try selecting the text and dragging outside of the box it will cause the outer div to scroll to display the hidden parts of the inner div, even though its set to overflow:hidden. This doesn't happen when I remove overflow-y:scroll from the inner div, but unfortunately I need that to be able to scroll so I've got to find some other way of fixing it.
Any ideas of how to prevent it from being scrollable on the x axis when selecting text?
EDIT: The issue also seems to be limited to webkit.
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.
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..