I've been working on a pyramid website and I'm having a problem. I have a textbox inside my td, and if the text is long, it cannot be seen already. Here is what it looks like:
As you can see the level1 portion there, if I have a name like someLongnameforever, it will only be seen like this:
Is there a fix for this using css or any trick? I am using bootstrap by the way.
If you want to see my table code, click this. I'm using twig templating also.
For now I am already using a textarea for the level 1 fields.
Why don't you try ellipsing if it exceeds the maximum width available to it. And maybe try showing the complete name in a tooltip?
That would keep the table clean too.
Demowrap word to new line if there is overflow
button{
word-wrap:break-word;
white-space: normal;
}
You can add an overflow: scroll; to allow scrolling or you could add an ToolTip attribute so when users however they will see the full content.
I guess you can do something like this.
You should be able to change the example to fit your needs.
HTML
<div id="fitin">
<div>Lorem im Lorem im Lorem im Lorem im</div>
</div>
JS
$(function() {
var $fitin = $('#fitin');
var $fitindiv = $('#fitin div');
$fitindiv.css('font-size', '1em');
while( $fitindiv.height() > $fitin.height() ) {
$fitindiv.css('font-size', (parseInt($fitindiv.css('font-size')) - 1) + "px" );
}
});
CSS
#fitin {
width: 100px;
height: 30px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
Check the fiddle
I'm trying to override the background of my rows in the table
This is what I did:
<tr style="background-color:#000099 !important;">
and this was the result:
http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2010
I've spent 2 hours on that, I've googled everywhere nothing seems to work
The only thing that have worked is
<style>
td{ background-color:#000099 !important;" }
</style>
But I don't want to do this, I will have different background colors of rows.
I tried to make seperate classes for each kind of row but td.classname didn't work either
You don't have to add !important to inline css as it has the highest priority.
Just do this:
<tr style="background-color:#000099">
I think you want to add this to your kindo css file , because kindo script will overwrite your css:
kindo.common.min.css:line # 9
.k-grid td
this is the css for the td just add your background color.
Edit:
Maybe this is what you are searching for:
$(document).ready(function(){$(".k-grid td:contains('Jan')").css("background-color","#000099");});
this is how it looks
Modify your html to this
<tr class="grayRow" > ... </tr>
<tr > ... </tr>
and then just set your style in css file like this
tr{
background-color: #fff;
}
tr.grayRow{
background-color: #ddd;
}
It shout be worked.
If you will change style from your css file NEVER use !important; flag on element in your html.
like this
<tr style="background-color:#000099 !important;">
I have check your alternative rows is added a class "k-alt" in <tr> with color #f5f5f5; Even you have <tr style="background-color:#000099 !important;"> , it will override by the class, because HTML parse out 1st then only insert the class "k-alt" by function. I suggest that you using jquery remove the "k-alt" or replace the "k-alt" background color by jquery.( I have see ur webpage have install Jquery Libary)
Replace the background
<script type="text/javascript">
$(function() {
$(".k-alt").css("background","#000099");
});
</script>
Or Remove the background
<script type="text/javascript">
$(function() {
if($("tr").hasClass('k-alt')){
$("tr").removeClass('k-alt');
}
});
</script>
I want to show a tooltip when the content of a kendo grid element is only partially visible. I am not able to control the display of a tooltip on the elements of a kendo grid.
I saw this issue has been discussed but I'm not able to find The problem, it seems to be the values of offsetWidth and scrollWidth.
The ellipsis works as expected defining in a css
.k-grid td {
white-space: nowrap;
text-overflow: ellipsis;
table-layout: fixed;
}
As I saw on this forum I use a function to detect when ellipsis, namely
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
and I call it on the mouseenter event as
kendoGrid.tbody.on("mouseenter", "> tr > td", function (e) {
var target = e.target;
if (isEllipsisActive(target)) {
return target.outerText;
}
return false;
});
The problem is that misteriously I get scrollWidth and offsetWidth equal, while I expected scrollWidth to vary according to the content of the element.
How is this possible, and what am I doing wrong ?
Thanks for any help
best regards
Marco
Here is an example of how to show tooltip only when there is a text with ellipsis (partially visible in the cell) and don't show tooltip if there is a full text is visible or if there is no text in the cell.
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td>text</td><td>text</td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
I made myself a custom jquery function:
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
(I know OP want CSS and HTML only, but consider jQuery)
Edit
Agreed with Matt Kantor using data attr. Edited answer above
If you're on a browser that supports it you can use CSS to transform the <a> into a table row:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
If you have to use a table, you can put a link into each table cell:
<table>
<tbody>
<tr>
<td>John Smith</td>
<td>123 Fake St</td>
<td>90210</td>
</tr>
<tr>
<td>Peter Nguyen</td>
<td>456 Elm Ave</td>
<td>90210</td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div> method:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
The usual way is to assign some JavaScript to the onClick attribute of the TR element.
If you can't use JavaScript, then you must use a trick:
Add the same link to each TD of the same row (the link must be the outermost element in the cell).
Turn links into block elements: a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.
This is my solution:
jQuery You can add this for example to a standard included javascript file
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Now you can use this on any <tr> element inside your HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
When i want simulate a <tr> with a link but respecting the html standards, I do this.
HTML:
<table>
<tr class="trLink">
<td>
Something
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
Hope can help someone.
Fiddle HERE
This saves you having to duplicate the link in the tr - just fish it out of the first a.
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.
Unless you have a single cell with an anchor tag that fills the entire cell.
And then, you shouldn't be using a table anyhow.
After reading this thread and some others I came up with the following solution in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">.
And make sure the script above is executed after the tr element is created (by its placement or using event handlers).
The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.
You can style specifically the link TRs with "tr[href]" CSS selector.
I have another way. Especially if you need to post data using jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.
I would really like a way of posting straight to a window location, but I do not think it is possible.
Thanks for this. You can change the hover icon by assigning a CSS class to the row like:
<tr class="pointer" onclick="document.location = 'links.html';">
and the CSS looks like:
<style>
.pointer { cursor: pointer; }
</style>
This method is here to give you a choice. Old css trick: filling the parent with position absolute.
<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>
inset:0 is a shorthand for top:0;right:0;bottom:0;left:0
we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.
Can you add an A tag to the row?
<tr><td>
</td></tr>
Is this what you're asking?