Applying overflow:hidden to .mat-tab-body-content.
I have provided overflow-x:hidden in css but also it is not getting
If you mean hiding Overflow in css, the answer is :
.mat-tab-body-content {
overflow: hidden;
}
Or:
.mat-tab-body-content {
overflow-x: hidden;
overflow-y: hidden;
}
Related
I have < p > tag and text there.
Css:
p {
max-height: 250px;
}
I want to make my text hide last word which can't fit in 250px of height and change it to "...".
I have tried it:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
It worked but not as I want. It hide word which can't fit in the first line, but not the the 250px of height. Is there anyway to do so? Thanx in advance.
You need to use the overflow-y property to hide the y-axis.
More about overflow-y.
CSS
p {
max-height: 250px;
width: 100px;
white-space: nowrap;
overflow-y: hidden;
}
HTML
<p>Some text goes here</p>
Try this it will help sure
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 250px;
width: 150px;
}
Is there a scrollbar element in HTML ?
If not, how can a scrollbar be created? I tried using a div with overflow but the problem is that I have to add content in order for the scrollbar to appear, and if I add content it will be visible.
CSS:
.h-scrollbar {
overflow-x: scroll;
width: 300px;
}
.h-scrollbar div {
width: 1000px;
display:block;
}
HTML:
<div class="h-scrollbar"><div>text</div></div>
Here is a demo: http://jsfiddle.net/4e8jbbc0/1/
How can I get only the scrollbar?
You can use the below css class to hide text and get scroll bar element only
.h-scrollbar div {
width: 1000px;
display:block;
visibility: hidden;
height:0px
}
I'm trying to mimic the behavior of overflow-y:hidden to overflow-x, but it doesn't behave the same way. overflow-x:hidden doesn't allow to scroll (by dragging the mouse).
See: http://jsfiddle.net/Gxm2z/
#container {
width: 300px
}
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.module {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ddd;
}
How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.
The plan is to use arrows, and maybe a custom scrollbar
this is my solution CSS based - simple and nice on all devices, no need for additional JS.
add fixed height and overflow hidden to parent element (in your case #container)
enlarge height of #modules - this create enough place hidden under parent element for scrollbar (because of smaller #container height, this place is invisible)
using -webkit-overflow-scrolling:touch; is good choice, make nice behavior on iPad and iPhone
#container {
width: 300px;
height: 60px;
overflow: hidden;
}
#modules {
height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
padding: 5px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
live demo: http://jsfiddle.net/s6wcudua/
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
This only work in webkit based browsers.
You could try using the ::-webkit-scrollbar pseudo element, like shown here.
http://iscrolljs.com/
Best Javascript custom scrollbar available, in my opinion. It will work great in Mobile, IE9+ and modern browsers. Plenty of options and callbacks. And yes, you can disable the visible scrollbar, but still retain horizontal scrolling.
I am currently creating a website and i'm trying to fix the max height to 1100px. However if i try do this i get 2 scroll bars coming up assuming because of the div. Could anyone help me? here is a snippet of my code.
CSS:
html, body {
border:0;
margin:0;
padding:0;
overflow-x: hidden;
}
#wrap {
width: 960px;
margin: 0 auto;
}
Just use the max-height property on the your #wrap element. It might also be advisable to move the overflow-x property, and change it to overflow-y, or simply overflow too:
html, body {
border:0;
margin:0;
padding:0;
overflow-x: hidden;
}
#wrap {
width: 960px;
margin: 0 auto;
overflow: hidden;
max-height: 1100px;
}
See this jsFiddle Demo
Edit:
I have added overflow-y to the html, body definition to prevent the default viewport scrollbar from showing.
I'm attempting to get ellipsis working on my site. This is the following HTML / CSS code and it doesn't appear to be working.
CSS:
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
Based on the initial post, we're all assuming the obvious, but just in case ... ;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
http://jsfiddle.net/NawcT/
EDIT: Solution was to style the paragraph vs the div.
Assigning position:absolute to the element to be truncated will probably have less undesired side-effects that float:left.
This worked for me:
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}