Text content overflow its element tag - javascript

Here's the code. It's in Angular if that has something to do with it. The actual text height is overflowing the element that contains it.
#website-title {
text-align: center;
// font-family: "Roboto-Mono";
font-size: 50px;
margin: 0;
position: absolute;
top: 50%;
}
<p id="website-title">Poll App</p>
result:
I want the element to be the height of the content.
UPDATE: Narrowed the problem down to Angular Material. Everything is fine before doing ng add #angular/material. Then after adding material and restarting the server, I get the problem.

Be default, the p tag will expand to fit its content. So unless you have explicitly set the p tag height to be smaller than the text content, the text will not overflow.
Try checking to see if you have set a height on the p tag.

I found the solution but I don't know why it fixes the problem.
The problem had to do with Angular Material's typography (Angular material was installed). Sol'n - Go to index.html and remove the class="mat-typography" from the body tag.

Related

h2 element is not visible in React while using semantic-ui

h2 element is not visible in React while using semantic-ui
My react code is accessible in code-sandbox,
https://codesandbox.io/s/suspicious-hill-4f4xr?file=/src/AddContact.js:137-159
I have 2 components embedded within App.
1st is the header component showing string 'Contact Manager'
2nd component, which is AddContact, is a form containing just 2 fields: name, email.
Now, the interesting thing is that, h2 element within AddContact, is not visible while rendering.
Can anyone let me know, why does h2 element gets hidden ?
The url shared above for code sandbox, directly cursors to the h2 element code.
The react app rendered by code sandbox can be directly accessed from https://4f4xr.csb.app/
From my side, I came to know that, using className="ui fixed menu" is what is hiding content below. But, I am not sure, why it happens.
Thanks.
The fixed menu covers the h2 element.
.ui.menu.fixed {
position: fixed;
z-index: 101;
margin: 0;
width: 100%;
}
If you replaced position:fixed with position:relative, the h2 element should display below the menu.
To fix the issue, you can add a top padding above the h2 or the container that is holding it, or add margins wherever necessary.

Text is overflowing in code tag instead of scroll

Use of rainbow.js to highlight the code causing code in <code> tag to overflow (x). CSS overflow property doesn't seem to work (even with !important)
Code containing <code> tag
<pre>
<code>
Any code to be highligted
</code>
</pre>
CSS :
code {
overflow: auto; /* Not working (scroll also not working) */
width: 100%;
}
Replacement of <code> tag with <div> eliminates the overflow problem but highlighting doesn't work (this plugin requires code to be put in <code> tag)
How can I resolve this overflow issue to provide scroll? Or do I need to use any other code highlighting library?
• With code tag (highlight yes, scroll no) Overflow
• With div tag (highlight no, scroll yes)
Instead of using the overflow property in the code element, you should use it in the pre element.
pre, by default, has white-space: pre declaration, which renders new lines only if the HTML inside has a <br> tag or a newline character, and that's why the text won't break if reaches the limit of the parent element. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for more details.
So, using overflow: auto in the pre element should solve it :)
code {
white-space: pre-line;
}
I got the same overflow issue.
This works well for me.
I had a similar issue using highlightjs and resolved it using:
code {
min-width: 100%;
width: 0px;
overflow: auto; /* Or scroll */
}
Explanation
To the best of my knowledge, in order for child elements to cause overflow within a parent container, in this case, the parent container should have a fixed value for width or min-width. And max-width: 100% did not work for me.
So I gave a static value of width: 0px to cause overflowing to kick-in and min-width: 100%. The parent element obeys the min-width because min-width has higher precedence over width.

bootstrap, pre height of container element

Hi im having issues laying out a html pre to be the height of the container element in twitter-bootstrap. Currently the i have tried a few methods to solve the problem i found on stack-overflow however the few that worked resulted in the div actually overflowing over the container element:
<container>
<h2 class='text-center'>continer content</h2><hr/><pre style='bottom: 0;position: absolute;height:100%;overflow-y: scroll;'>
</container>
This resulted in pre element becoming the size of the page and flowing over the container element.
<container>
<h2 class='text-center'>container content</h2><hr/><div class="col-xs-10 fh" style="background: black;"><pre style='overflow-y: scroll;'></div>
</container>
This method did not result in any changes at all to the presentation of the content either and remained just 100% to fit the content inside the pre tag rather than filling the container. Is there a simple way to stretch the pre tag to fill bootstraps container element?
Note that i have tried a number of ways and the only one im reluctant to try is editing bootstraps css so container has this attribute:
display: flex;
For childs:
align-items: stretch;
As i would prefer not to modify bootstraps css file. Any help would be appreciated :)
This can most simply be achieved by using position: absolute; on the <pre> element and position: relative; on the containing element, then setting top: 0; and bottom: 0; on the <pre> element.
See for more detail: http://jsbin.com/wurufo/edit?html,css,output
Note: I have made some amendments to your HTML because I'm not sure what your intention is by using <container> as an HTML element. Also, I have taken steps to ensure the <h2> appears over the <pre> because I'm not 100% certain what your goal was there.

position relative div wrapping input box

A little warning: I'm just starting out with css and js/html.
I'm trying to get a wrapper to wrap around a text box. As I understand it, divs without explicit dimensions wrap their content (height/width: auto). I'm using jquery to wrap an element element with a wrapper for a label. I'd like it to wrap the entire input box (as I believe it should considering the input box is within the div), but it doesn't seem to be as simple as wanting...
For some reason, I can't get the properties of my wrapper to change after setting them - even using the Chrome JS console. So even going in and manually setting the height of the wrapper div to 40 doesn't change anything.
Here's the fiddle everyone so far has been asking for - there's not much more to this question. I just want the div to wrap the input, which it isn't.
http://jsfiddle.net/5vBz4/
As far as I know, my input styles aren't conflicting, either:
input.floatlabel {
font-family: Helvetica;
font-weight: 100;
font-size: 15px;
height: 40px;
width: 40%;
text-align: center;
}
This is what I have so far, and the result.
As I understand it, you want:
.wrapper {
display: block;
}
Fiddle

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;.

Categories