I am trying to implement String ellipsis in the Table tag.
The source code is below.
<div>
<div class="widget-body no-padding" style="min-height:0px;">
<table class="table" style="table-layout: fixed;">
<tbody>
<c:forEach var="item" items="${result.stuffList}" varStatus="idx">
<c:if test="${idx.index < 5}">
<tr>
<td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
<nobr>
${item.name}
</nobr>
</td>
<td class='text-center' style="width: 20%;">
${item.regDate}
</td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>
</div>
This code works and if String is too long it shows ... what I expected.
However, when I test responsive it becomes ugly.
I wrote following part to express item registration date.
But when browser shrinks, its back part does not showed up in screen.
<td class='text-center' style="width: 20%;">
${item.regDate}
</td>
How can I use ellipsis in Bootstrap in all browser?
So it appears like this way
What I expected(when shrink browser) >>
column 1 / column 2
AAAA.... / 2014-09-24
What now looks like >>
column 1 / column 2
AAAA.... / 2014-09
The problem is >>
Before I add String ellipsis function it works responsive.
My guess >>
Maybe table-layout: fixed; style is the cause. but do not know how to implements String ellipsis function without table-layout.
I hope it becomes more clear than I asked first :D
I have got the cause
The problem is width : 80%, width: 20%, table-layout:fixed.
So when I resize the browser it takes these options for it.
But I still do not know how to replace it.
All of these are in a div which is small part of the web site and I want responsive web.
Edited after choose an answer.
Thanks for answering my question!
However I found the cause, but could not fix this.
The chosen answer was not relevant, however it was helpful.
My problem was not by bootstrap, but width.
Even though using responsive web library,
can not be responsive if you use width with % or px properties.
you have to apply this all style for ellipsis element.
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Thanks to this post, found a half-working solution without needing a fixed table, so plenty responsive. I've tested it on FF 43, Opera 34 and Chrome 47):
.ellipis {
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
}
However, if some data is already present in cell, it will jump to next line...
If you are using bootstrap you can use the text-nowrap class with just two these style properties style="overflow: hidden;text-overflow: ellipsis;"
Full example:
<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">
The 20% is a suggestion, table layout will ignore it.
Place a div with an appropriate width (or max width) inside the table cell, and place the text inside that div.
Related
I have a Bootstrap 5.2 BootstrapTable in an ASP.NET Web Forms project that is currently declared like so:
<table class="display table table-bordered table-striped w-100 tables"
data-click-to-select="true" data-unique-id="InventoryItemID"
data-pagination="true" data-sortable="true" data-page-size="5"
data-single-select="true" data-maintain-selected="true"
data-id-field="InventoryItemID" id="items" name="items">
<thead>
<tr>
<th data-field="state" class="set-height" data-checkbox="true"></th>
<th data-field="Description" data-sortable="true" class="set-height set-width text-start">Description</th>
<th data-field="MemberPrice" class="text-end set-height" data-formatter="formatter" data-sortable="true">Price</th>
<th data-field="QtyAvailable" class="text-end set-height" data-sortable="true">Available</th>
</tr>
</thead>
</table>
What I am trying to achieve is this - the data that goes into the Description field can sometimes be very long, and if possible, I'd like to be able to perhaps use CSS to truncate the data so that it is never longer than one line per row. I attempted this CSS, as you can see in the table declaration above:
.set-height {
max-height: 100px;
overflow:hidden;
}
.set-width {
min-width: 100px;
max-width: 100px;
}
but it doesn't work. If the data in the Description column is long enough to wrap to the next line then it still does.
I was also hoping that maybe bootstrapTable had a parameter for this if CSS isn't the answer.
I appreciate everyone's help with this!
You could try setting an ellipsis on that particular column via css like so:
This will "truncate" to just one line only
.ellipses{
width: 50px; (adjust width to suit your needs)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This will "truncate" the content to n number of lines
.ellipses{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; (where 2 is the number of lines)
-webkit-box-orient: vertical;
}
Additionally if this doesn't work for some reason, try putting the description in a pair of paragraph tags and apply the ellipses classname. Hopefully that solves your problem
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
I have a table in my html that I would like to center on my page. I have the following code. I is perfectly find in ie but not in chrome. Am I doing something wrong?
<table align="center">
<tr>
<td>
<div class="zoom_controls"> </div>
</td>
</tr>
</table>
The align="center" syntax was deprecated a long time ago. Add margin:0 auto to your table:
table {
margin:0 auto;
}
jsFiddle example (border added for visibility)
Give the table a fixed width, if possible.
Give the table a top- and bottom-margin of 0 (or other if you want to) and a left- and right-margin of auto.
This works with every kind of element with a known width.
You can also use a variable width (em / %).
EDIT: seems like other were typing the same solution as me.
For me what worked is:
margin: auto;
display: inline-block;
Tables
Sounds easy I know. I told the client it would be done in 5 minutes... 4 hours later it is just getting annoying...
This is the current structure:
<div class="RadWindow">
<table class="rwTable">
<tr class="rwContentRow">
<td class="helpDialog"> Content to be cut off and wrapped</td>
</tr>
</table>
</div>
There is actually a few more styles etc in the div, but these are the ways that I should be able to control it. I have tried setting a height, max-height and overflow on the class .helpDialog, but nothing happens.
I then tried it on the <td>:
td.helpDialog
I then tried stipulating the entire path in a verbose manner:
.RadWindow table td.helpDialog
It is just not working for me. Any help would be GREATLY appreciated!
use an extra div container to control the layout.
html:
<div class="RadWindow">
<table class="rwTable">
<tr class="rwContentRow">
<td><div class="helpDialog">Content to be cut off and wrapped</div></td>
</tr>
</table>
</div>
css:
.helpDialog{
height: 50px;
width: 50px;
overflow: hidden;
}
By the way, do not over qualify css selectors. This will slow down your page rendering especial on large dom trees and/or dynamic sites.
I want the text in the header to be shortned with ellipses. but it doesn't the whole address shows in one line
<table border="0" style="font-weight:normal; position: absolute; top:45; left: 0;">
<th align="left" style="" width="10%">
<span style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:10px; font-weight:normal; white;"
onclick="dropdownResize()"><i>Address</i> <b>${bean.address}</b></span>
</th>
<tr >
<td style=" border-style:solid; border-width:0px; text-transform:capitalize; text-indent:1px;">
</br>
<br>Usual address <br><b>${bean.address}</b></br> <br>
</td>
</tr>
</table>
You have a lot of stuff wrong with your code,
For a start you are using <b> <i> as well as using <table>s to layout your content (which is by the way a bad practise) AND you are using <br> </br> which aren't even real tags - the tag you are looking for is <br/> - It is a self closing tag as it can never contain any arguments or content.
The <span> tags you have chose to use do not support the width parameter as they just wrap the text that is contained within them and as such I have changed this to a <div> and changed all your <b> and <i> tags to <span> tags with CSS classes attached to them.
I have fixed up your coding here:
Live Demo
As for your table layout I suggest you read a few of these:
http://shouldiusetablesforlayout.com/
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Next up, support:
FF4 does not support the text-overflow:ellipsis as it used to in FF3.6 via a hack, see here for further info:
text-overflow:ellipsis in Firefox 4? (and FF5)
You're using a <span> which by default is an inline element and cannot receive width, height, etc like block level elements.
To change this, either use a div or add display: block; to your span's style.
Try adding display:block to the style on the span tag.
Make sure you test it in supported browsers: http://www.quirksmode.org/css/textoverflow.html
Firefox doesn't support ellipsis.