So as you know if you have a select, it stretches the container to accommodate the longest length option.
I have a truncate function that is basically a substr, length of 20, add periods to the end so it does not stretch it.
I have searched but either i am not searching right or it doesn't exist, but i want to be able to click on the select and it show the entire option OVER the page and not push the surrounding elements. A position fixed so to speak, except not because i dont want the page to scroll around the select.
Anyone know of any plugins or anything that do this?
EXAMPLE
This is a really...
This is done so it does not stretch the entire TD element it is in. Now when i click on the select to view the choices, i would like it to actually show
This is a really long sentence that was truncated.
HOWEVER i do not want it to push the TD cell's width when displaying it, so a hide/show of different select menus would not work, as that would push the width.
The simplest way to do it would be to convert the <select> to a bootstrap dropdown.
I'm not sure if this is a stupid answer. But have you tried position:absolute;?
CSS does some wonderful tricks.
Also, the periods at the end of a sentence can be done wih css, using white-space: nowrap; text-overflow: ellipsis; overflow: hidden.
Related
I have 2 divs on a page and the first div has text content only.
Currently, when the content of the first div overflows it gets truncated since the CSS for the first div is:
.one {
overflow: hidden
width: 100%;
white-space: nowrap;
}
But on an overflow, could I make the overflow text appear in a 2nd div?
For example, let's say the text content in the first div is "Hello there" and it displays "Hello" but "there" is cut off because of overflow hidden, can I make "there" appear in a 2nd div?
I'm sure this is not out the box behaviour but I wondered if its possible or if anyone knows a lib to do this. Thanks.
The native capacities of CSS do not allow for this kind of behaviour, since it is quite special.
If you want to manipulate the text so that it gets displayed in different parts of your DOM, depending on a determinate critera, you will have to use Javascript to do so.
Use Javascript to create a kind of parser that detects if the text matches the criteria needed to separate them, and if it does so, manipulate the content so that it is displayed in the correct element.
EDIT:
If what you are trying to do, though, is basically format differently the first line from the rest of the text, what you might need is simple the ::fist-line pseudoselector.
This way you can set the first line to have a determinate size, color, etc.Notice though that only a certain amount of properties can be applied to this selector.
I had this exact problem tonight. I have 2 divs side by side, I want the text of the first div to spill over into the 2nd div if needed. I solved it with z-index, make the div with the text that spills out have a higher z-index than the adjacent one that you want to spill over.
I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
I'm using Harvest Chosen for some dynamic select elements, but I'm running into a problem where if the select element is near the bottom of the page the select list gets cut off. The containing div is set to overflow:hidden, and for some reason changing that to overflow:visible results in a scrollbar showing up inside the container div.
It would be really nice if I could just get the options list to behave like a normal dropdown, and render "upwards" when the bottom would get clipped.
So is there some magic css (or maybe javascript/jquery) that could force the div to show on top of the select element instead of below it, but only when it would be cut off by the containing element?
Or better yet an option in the Harvest Chosen plugin that I missed?
Looks like even in chosen 1.2.0, it still has the same behavior. I'm surprised nobody has added this feature yet. The alternative: use Select2.
I have a menubar(div) which houses bookmarks and when too many bookmarks are inserted this menu bar(div) becomes too wide for the preferred page size(1280, 720) and becomes scrollabe, leaving half of the bookmarks out of view.
I want to ensure that all the bookmarks are in view and the best option seems to be that I have to make the extra bookmarks appear on the next line. can someone guide me in the right direction or better yet provide a working sample. Im just learning to use jquery and am finding this very difficult.
Example code in jsfiddle
You have this in there on the ul element.
white-space: nowrap;
Which means that that element's contents will never wrap to another line, so it extends out past the edge of the window instead. Remove that rule, and you have something closer to what you want. That is, when you content overflow one line, you want it to wrap to the next line.
http://jsfiddle.net/y9a64/9/
http://jsfiddle.net/bH8yA/
Are you looking for a solution like that? If so, it's straight CSS.
You can achieve that by using css overflow-x: auto; please see example http://jsfiddle.net/Xa8yB/6/
Is there any JS/CSS/jQuery magic I can work to identify whether the last visible bit of content in a div is being cut off, and slightly increase/decrease the DIV's height to prevent the cut off text?
Our system allows the user to enter "elements" containing XHTML (using a Telerik Edit control). We have an ElementList page, where we show all the user-entered elements. However, since the user-entered XHTML can be very large, on the list page we only want to show the first 3 lines of each. So I set the DIV containing the XHTML to a specific height equal to 3 rows of text, and set overflow: hidden. So far, so good.
However, since the user can enter XHTML, they can create tables with padding (or otherwise diverge from standard text height). The text within those cells appears to be sliced off horizontally, due to the combination of height and overflow: hidden. Our requirements person doesn't like the look of this; but of course we cannot restrict the XHTML editable by the end user.
Here is a JSFiddle example of the issue.
This question is not a duplicate of:
"Stopping cut off text in variable height div..." as that question involves "webkit-line-clamp" which is irrelevant to my situation. (and in any case, that question was never answered)
"Cut text by height, no truncate" as that question is about a DIV containing pure text; my DIV contains XHTML. You'll note in the JSFiddle that I'm already sizing the DIV height using the em measurement.
This issue has me completely baffled - I'm hoping the SO community can come to my rescue!
UPDATE:
Ultimately, I suspect this cannot be resolved using HTML/JS/jQuery. In fact, you can craft a table (or series of DIVs) with gradually increasing top-margins, such that there's no way to avoid slicing at least one of them.
Thanks to all for their responses. I'm marking one as an answer, because in my opinion, it's a particularly simple/elegant workaround.
This is not the solution you were looking for, but it might be a good design workaround.
I put a white gradient in the bottom of the div, so that it creates sort of a "visual ellipsis"
Take a look: http://jsfiddle.net/robertofrega/LkYjs/3/
It is not as ugly as when the text is simply cut.
Your trouble is coming from overflow:hidden;. This line is doing exactly what you tell it to do, namely hiding the overflow. Can you use overflow-y: auto or something like that? That along with a grippy (like SO uses on its text areas), should help you out.
Instead of having overflow:hidden, you could set it to auto and then check for the presence of a scrollbar upon submission of the content. See this thread:
detect elements overflow using jquery
Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip