Multiline tooltip using only React - javascript

I'm trying to build a multiline tooltip using [this example], I'm using it as a refernce because it involves functional components.
It works just fine, when its a short line of text, but doesn't go on a new line, which is something that I need.
I tried adding < /br > inside of the content, changing the content to jsx format and adding code below to the css file:
width: 200px;
word-wrap: break-word;
All it managed to do was decrease the tooltip backgronud width to 200px.
How do I change code in the example to go on a new line if content size width is going above the predetermined width?

How do I change code in the example to go on a new line if content size width is going above the predetermined width?
Besides setting the width to the e.g. 200px, you should also remove the white-space: nowrap; property because that is simply disallowing the text to break, even if it does overflow the container.
Codesandbox: https://codesandbox.io/s/how-to-make-an-extremely-reusable-tooltip-component-with-react-and-nothing-else-forked-v09e4y
More info about white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Related

Dynamically set the height of mat-expansion-panel

I am trying to use a mat-expansion-panel, however, with regards to the project I am working on the length of the title(s) I need to set on each panel could be very long and not predictable in most cases. Currently, if the length of the title text is too long then it goes out of the panel's bounds.
I know that I can set [collapsedHeight] and [expandedHeight] properties to adjust this behavior, however, I am trying to look for a solution that does not hard-code a value.
Here's a StackBlitz demonstrating what I am talking about. In that, the first expansion panel shows what happens when the title content is too long and [collapsedHeight] and [expandedHeight] is not set. The second expansion panel shows what happens when I set it to a static value - 190px.
What would be the best approach to achieve this?
I did a little change, you can see here. Let me explain:
I have set the height: 100% !important; in the mat-expansion-panel-header element. With that you are telling to that element that its height will be set by all the childs it has inside (title, description, etc).
And I have deleted the margin: 10%; It's better if you use pixels instead of % in margin or padding css properties.
Also you can make the title in one single line and set a ellipsis if it is very large, you can do that if you set in the title the next class:
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

How to set body height with JavaScript?

document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!

Horizontal Overflow/Text Inside Span nested inside Div

I'm trying to build a type of ticketing system, where each ticket is a div and has other, nested divs inside of it to better accommodate content. Aside from images and other types of media, it has a plain text area where a description of the ticket will go.
Everything works as it should, but when I print the description, the text continues horizontally, never vertically. This in turn produces a horizontal overflow and the div which contains that text apparently extends beyond the 100% width (which I understand fills its parents div width) I had assigned to it.
The text is inside a span tag, which is in turn inside the description div. I'm fetching that text from a JSON I receive client side, and I'm just concatenating, i.e. :
var description = receivedJson.description;
var desDiv = '<div class="description"><span>'+description+'</span></div>';
I think part of the problem is I'm concatenating all of it in a single line. Here's a demo, but again, since it's not dynamically substituting text, it kinda works and doesn't correctly reproduce the problem.
This is what's actually happening.:
I'm getting both scrollbars, when I only want the vertical one - if-and-only-if it's needed. Even if no text is present, I get scrollbars (probably cause of the padding I have on that span tag, but then how do I get spacing between the text and the div?).
How can I get the text to display vertically and only get a vertical scrollbar when the text exceeds the div's height?
.c span {
display: inline-block;
height: 100%;
padding: 1em 2em;
background-color: red;
}
remove width:100% . this should work fine :)

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.

How can I dynamically resize a DIV element's width to fit its text content?

Let say I have this HTML code snippet:
<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>
Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif
I wonder how I could dynamically resize the div's textContent width so that it fits its text content nicely (neither the text will be wrapping nor scrolling nor truncated).
Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif
I am open to any solution using CSS and/or JavaScript.
I wonder how could I dynamically
resized the div's width to fit the
text content (without wrapping)?
Assuming the content would fit without overflowing, you could use a float without a width set (width isn't required in CSS 2.1 or greater). Without more detail, I can't suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).
If you're not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don't overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport -- eg, a film strip that scrolls horizontally. In that case, altCognito's suggestion of white-space: nowrap would be very useful.
<style>
div {
white-space: nowrap;
}
</style>
This will do the trick (though you probably should be more specific about the divs that you want to change. This means the divs that you do use this on won't have any line feeds unless you specify them yourself. But I'm guessing you're using this for labels, so you should be all set.
See an example.

Categories