I am using the Kendo UI grid for Angular and have a scenario where one of the grid columns has a lot of text data, but I don't want the text to wrap. I want all the rows the same height.
I tried adding this to the SCSS file for my component:
.k-grid {
background-color: green;
}
.k-grid tbody tr {
height: 40px;
}
.k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The background is green (I put that there to rule out any issues with my SCSS not being built correctly) but the other styles seem to be getting ignored. I looked at the elements in Chrome debugger, and the rules for the row stuff aren't being referenced at all, which makes me think these selectors don't work for the Angular version. There's plenty of documentation for the jQuery version (which is where I got this from) but nothing for the Angular control.
Does anyone know what I'm doing wrong or have any ideas how to make this work?
Thanks,
James
Try this:
/deep/ .k-grid tbody tr {
height: 40px;
}
/deep/ .k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Edit:
For more info, you can read about it in the documentation here.
Related
I have a table in which a sticky column contains dropdown list. my problem is dropdown list goes under the column in next row onwards can anyone help me
I have two columns position sticky because i don't want them to moved while scrolling.In one fixed column I have a dropdown list while I'm clicking on dropdown it goes under the sticky element
below is the code can someone help me
I tried adding z-index but it seems not working
remove the right declarations from these 2 sections:
.fixedit{
position: sticky;
width: 10px;
}
.fixactivate{
position: sticky;
}
Also changing your white space to nowrap might help too in this section
.hex-table-scroll .hex-table tbody tr td {
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
}
I'm using Semantic UI for the CSS base. Here's a fiddle I've been working on.
I'm having trouble getting the existing answers working from googling around. They all seem to have this problem where there is a ton of whitespace to the right.
I'm trying to get it working such that it integrates nicely with the existing CSS of semantic UI to look good (no whitespace to the side), but I'm not having any luck and I've been at it for a while.
It's fine if this only works with newer browsers since I'll be using electron anyway.
This CSS looks like it's required but I'm not sure how to modify it to work properly with what I have:
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
The source of the whitespace problem seems to be the ui class. It has several media queries on it that cause the content to re-flow at smaller screen sizes. If you look at the media query it doesn't apply if you add the class stackable to your table like below.
<table class="ui striped table unstackable">
Also, you only have 4 columns, seems like you want 5. Make the following change.
tbody td, thead th {
width: 140px !important;
}
thead th:last-child, tbody tr td:last-child{
width: 296px !important; /* 140px + 16px scrollbar width */
}
Working fiddle here
I'm trying to integrate Highlight.js with Blogger. So far, the syntax highlighting works great, but I can't seem to find a way of preventing the code lines inside the <pre><code> elements to wrap automatically. What I need instead is for the browser to display a horizontal scroll bar.
I have added the following to the blog template, at the end of <head>, as explained in the site:
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
</script>
And all my usage instances are:
<pre><code class='cpp'>
// code here; 'class' changed according to language.
</code></pre>
I have tried to edit the Highlight.js CSS file to no avail. I have also tried setting the pre and code styles overflow-x property to scroll with no change whatsoever. My guess is that Blogger overwrites that property globally.
Does anyone know of a way to overcome this and avoid the code lines from wrapping/breaking at the end of the code area, showing the horizontal scroll bar instead?
This worked for me
.hljs {
white-space: pre;
overflow-x: auto;
}
After opening this issue on the GitHub page, the author confirmed that the line wrapping was not done by his scripts.
After that, I did some more fiddling in the CSS and was able to fix the problem by overriding the .hljs style of highlight.js. This was the only way I've managed to prevent the text wrap and allow scrolling. It is probably not the best or only fix, but that's as far as my knowledge of CSS goes. Following is the code I've added to the Blogger template.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<style type='text/css'>
pre, code {
white-space: pre;
overflow-x: scroll;
}
.hljs {
display: inline-block;
overflow-x: scroll;
padding: 0.5em;
padding-right: 100%;
background: #002b36;
color: #839496;
-webkit-text-size-adjust: none;
}
</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
</script>
I've changed display to inline-block and added overflow-x: scroll and padding-right: 100%. The padding seems to prevent the code area from shrinking to the size of the longest line of text.
One thing I did that solved the problem was to set the width of the hljs element to be very large. This isn't an optimal solution, but it works.
.hljs { width: 2300px; }
Customize .hljs style from github.css and place it after github.css in your pages.
.hljs {
display: inline-block;
white-space: pre;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
Is any option to control the text which is in <td>
I am using this css style:
word-wrap: break-word;
width: 200px;
display: block;
Without any text in td it is looking good but when there is a text by using the above css the UI alignment is getting disturbed.
See here in second image the alignment at QR tag td is disturbed completely.
Even if there are more no.of characters are there the alignment shouldnot be disturbed .
please help me out with this issue.
Assuming you only want the row to have a fixed height so that only one line of text to be visible.
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
I my page i have a panel and a table in the panel, this is my code in JSFiddle
I have a problem in my code, in td of table i have text and i set text-overflow for that but it doesn't show correctly. it shows like this :
But i want text shows like this:
How can i fix it?
You can give your paragraph a class for easier to manage:
<p class="text">...............</p>
Then you can use following css properties to achieve your task:
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
Updated Fiddle
hope it will help you, remove the text-overflow and white-space from td.
.info-table td {
overflow: hidden;
}
demo
remove the white-space: nowrap; property in your css, you will get
Actually overflow works only on single line that's why your all content shrink onto one line.
you may use some jQuery/Javascript library like this http://pvdspek.github.com/jquery.autoellipsis/ or try a pure css solution using this tuts
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
try something like this,FIDDLE
change your code
FROM THIS
.info-table td {
overflow: hidden;
text-overflow: inherit;
white-space: pre-line;
}
TO THIS
.info-table td {
overflow: hidden;
}
EDITED CODE FIDDLE
.info-table td p{
max-height:260px;
line-height: 18px;
text-align: justify;
font-size: 10px;
font-weight: normal;
}
increase the height of div. i think due to less size it showing like this