Just so you know, I'm new to html and CSS and I'm sorry if the question is stupid, but I have a problem that seems simple, and yet I've been searching for a solution for hours and couldn't find any. There are many forums discussing similar issues but none of the solutions applied to my particular issue. I have simplified the page as much as I could to isolate the problem and this is what I got:
As you can see, Google Chrome and Safari keep the first cell only as high as its content, exactly as I want it to be displayed. Firefox, however, arbitrarily stretches the cell to a random and unnecessarily long height.
What I have tried with no success so far:
Set the first cell height as "auto" (although I think this is already the default).
Set the first cell height as 1px
Set the "oi" td and/or tr height as "100%".
Set the first cell to "display:block;", which gave me an even more intriguing result:
http://i.stack.imgur.com/KqBUB.png
How can I specify that I want the cell only as high as its contents? If "auto" doesn't do that, what does? None of the other possible "height" values seem to do the trick. Does anyone have any idea why this happens and how to fix this problem?
Here's my code:
<html>
<body>
<table border="1">
<tr>
<td>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
You need two things:
1. A doctype.
2. Set the Td's height to 1px, content will expand the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td style="height: 1px;">
1st cell 1st cell<br/> <br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
Of course, if you want to do this with REAL / VALID html + CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
<!--
#column_left {
float: left;
width: 20%;
}
#column_middle {
float: left;
width: 60%;
}
#column_right {
float: left;
width: 20%;
}
.breaker {
clear: both;
}
.pad {
margin: 10px;
padding: 1px;
}
-->
</style>
<body>
<div id="container">
<div id="column_left">
<div class="pad">
<p>Left Column</p>
</div>
</div>
<div id="column_middle">
<div class="pad">
<p>Middle Content</p>
</div>
</div>
<div id="column_right">
<div class="pad">
<p>right content</p>
</div>
</div>
<div class="breaker"></div>
</div>
</body>
</html>
See how much cleaner that comes out? Put your styles in a stylesheet and this is reduced to VERY few lines of code for a basic layout.
It's kind of a hack, but a possible solution would be to set the height of the cell that's too long to 1, and then let the content push the height down.
<html>
<body>
<table border="1">
<tr>
<td height="1">
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
Related
I am trying to select a value from the table of dropdown menu. But Watir always gave me the unlocate error when using table/tr/td.
I can't locate the element using
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').text
But the output of code below returns true.
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').exists?
I also tried
#browser.select_list(:id, 'wikiActionMenuLink_dropdown').select_value('Delete Wiki')
but got error "unable to locate element, using {:id=>"wikiActionMenuLink_dropdown", :tag_name=>"select"}"
Below the html. Could someone give me some suggestions?
<div id="wikiActionMenuLink_dropdown" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 123.75px; left: 1592px; right: auto; z-index: 1000; height: auto; overflow: visible; display: none;" role="region" aria-label="dijit_Menu_2" dijitpopupparent="">
<table id="dijit_Menu_2" class="dijit dijitReset dijitMenuTab`enter code here`le lotusPlain dijitMenu dijitMenuPassive" cellspacing="0" tabindex="0" role="menu" widgetid="dijit_Menu_2" style="top: 0px; visibility: visible;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_15" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Edit Wiki " title="Edit settings of this wiki." widgetid="dijit_MenuItem_15">
<tr id="dijit_MenuItem_16" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Delete Wiki " title="Delete this wiki." widgetid="dijit_MenuItem_16">
</tbody>
</table>
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
<html>
<head></head>
<body></body>
</html>
</iframe>
</div>
Watir will only return the text of an element if the text is currently visible, regardless of whether the element exists. If you made the same call in your first example with .present? instead of .exists? it would return false.
For non-select/option dropdown interactions, you usually need to click the dropdown element first, and then once the options are visible, click on the one you want.
I am trying to detect the xpath or css but everytime I run the script, the div id's and class names change which there by fails the script.
<div class="yui-dt-bd" style="height: 300px; width: 100%;">
<table id="yuievtautoid-0" summary="" style="margin-top: 0px;">
<tr id="yui-rec28" class="yui-dt-rec yui-dt-first yui-dt-even yui-dt-selected" style="">
<td id="yui-gen52" class="yui-dt23-col-professorId yui-dt-col-professorId yui-dt- sortable yui-dt-first" headers="yui-dt23-th-professorId ">
<div id="yui-gen51" class="yui-dt-liner">1</div>
</td>
<td id="yui-gen44" class="yui-dt23-col-professorName yui-dt-col-professorName yui-dt-sortable yui-dt-last" headers="yui-dt23-th-professorName ">
<div id="yui-gen43" class="yui-dt-liner">John Power</div>
</td>
</tr>
</table>
</div>
I had written xpath=//*[#id="yui-gen46"], but id's keep changing. Tried writing table id too. But it does not work.
xpath=id('yuievtautoid-1').
Appreciate some input .
You can specify a part of class or id that is not changed. For example:
//*[contains(#class, 'col-professorName')]
or
//*[contains(#id, 'yuievtautoid')]
or CSS versions:
css=*[class*="col-professorName"]
css=*[id^="yuievtautoid"]
i am struggeling with a ajax window getting opened in deep nested DOM. I am not that good in jquery so i try to find some help here.
jWindow is supposed to open a new window on click with ajax-content.
For testing i put a Link just under the first DIV. THIS WORKES PERFECT !!!
Then i added some code to generate a TABLE with contains one coloum with a Number which contains the SAME a-tag as the test on top. THIS DOES NOT WORK.
Here is a copy of the DOM(i put horizontal rules around the two a-tags to make it more easy to find them):
<div id="content">
<p>
<a class="get_detail_bill_window" bnr="177" shop="2" href="#">Text Ajax</a>
</p>
<div id="form_selection">
<div class="ui-widget ui-widget-content ui-corner-all" style="padding: 5px; font-size: 1em; width: 1200px;">
<div class="t_fixed_header_main_wrapper ui-widget ui-widget-header ui ui-corner-all">
<div class="t_fixed_header_caption ui-widget-header ui-corner-top">
<div class="t_fixed_header_main_wrapper_child">
<div class="t_fixed_header ui-state-default ui" style="border: medium none; font-weight: normal;">
<div class="headtable ui-state-default" style="margin-right: 15px;">
<div class="body ui-widget-content" style="height: 340px; overflow-y: scroll;">
<div>
<table id="atcs_sort" style="width: 1182px;">
<colgroup>
<tbody>
<tr>
<td class="ui-widget-content">2011-10-16</td>
<td class="numeric ui-widget-content">
<a class="get_detail_bill_window" bnr="341" shop="2" href="#">341</a>
</td>
<td class="numeric ui-widget-content">02:25:08</td>
<td class="numeric ui-widget-content">2011-10-16</td>
If you have a look at these 2 anchors, they are absolute the same. But the one nested in the DOM does not want to work.
Here is the code of the Document ready:
$(".get_detail_bill_window").on({
click: function() {
var shop=$(this).attr('shop');
var bnr=$(this).attr('bnr');
alert("bin im Click - Shop: "+shop+" Billnr: "+bnr);
var a = $.jWindow
({
id: 'detail_bill',
title: 'Details of Bill-Nr.: '+bnr,
minimiseButton: false,
maximiseButton: false,
modal: true,
posx: 450,
posy: 50,
width: 700,
height: 200,
type: 'ajax',
url: 'sge_detail_bill.php?s='+shop+'&bnr='+bnr
}).show();
a.update();
}
});
I tried this to see, if the selector might have a problem:
var pars = $(".get_detail_bill_window");
for( i=0; i<pars.length; i++ ){
alert("Found paragraph: " + pars[i].innerHTML);
}
But i found all(the top sample AND the nested ones) of the a-tags with this class.
So, i am totally lost and desperate. No idea why these nested links are not working.
If somebody have a solution, i would be very greatful.
Many Thanks in advance,
Joe
what is your question put short? rephrase plz. but in case i understood correctly, you want to loop throguh all the elements in your DOM
lets say php made it look like
<.div id='foo'>
<.ul>
<.li><.span id='foo1'><./span><.span id='foo2'><./span><./li>
<.li><./li>
<.li><./li>
<./ul>
<./div>
and to access each of the inner elements do
$('#foo foo1').click(function(){// handler in
$('#foo #foo1').parent().each(function(){// access element, go back to li, loop through all of them
$('#foo2',this).show();// on click of foo1, foo2 will show (as an example)
});
},function(){// handler out
$('#foo #foo1').parent().each(function(){
$('#foo2',this).hide();
});
});
hope this helps somewhat
In IE6, the expander graphic for the root node in the table is not showing up. If I position the mouse in the correct spot next the the root nodes text I can actually click the expander.
The expander does show up for all child nodes.
The odd thing is the examples at the TreeView site show the root expander image in IE6. I can't see the difference between the examples code and mine. I did a side by side comparison of the CSS for the elements in question and nothing jumps out at me.
I have no extra styling than the stylesheet that came with the plug-in provides.
<script type="text/javascript">
$(document).ready(function() {
$("#tree").treeTable();
});
</script>
-
<body>
<table id="tree">
<tr id="node-1">
<td>Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
Just for reference, since i ran into this trouble too...
The first parent image doesn't show because the space for the image to be is too small, so the treetable.css and treetable.js need to be modified.
In jquery.treeTable.js, change the line:
cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>');
To:
cell.prepend('<span class="expander"></span>');
And in jquery.treeTable.css, add the last two lines (margin-left and padding-left) to ".treeTable tr td .expander":
.treeTable tr td .expander {
background-position: left center;
background-repeat: no-repeat;
cursor: pointer;
padding: 0;
zoom: 1; /* IE7 Hack */
margin-left: -3px;
padding-left: 15px;}
°°°°°°°°°°°°°°°°°°°°°°°°°
I didn't Modify the Code, the above tip was taken from:
http://javathoughts.capesugarbird.com/2009/03/jquery-tree-table-for-wicket.html
-VicSan.
I agree with VicSan solution, although I prefer not to modify TreeTable source code (so I can upgrade it to future versions without need to make again my changes inside the new code). So I suggest you to simply add a padding-left in the style attribute of the first cell of the first row of your tree-table (the root):
<body>
<table id="tree">
<tr id="node-1">
<td style="padding-left: 19px">Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
I put 19px because it's the default, but, if you specified another value in the indent option (when you create the tree-table with .treeTable(...)), put that one.
I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100px and overflow:auto, hoping for scrollbars to appear when the content does not fit.
It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.
I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.
This is also logged as an official bug in the final, release version of IE8
Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.
This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.
It is logged as a bug in the final version of IE8 with no fix.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
There is a really, really hacky CSS workaround:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.
{
overflow:auto
}
Try div overflow:auto
I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
{max-height:200px, Overflow:auto}
Thanks to Srinivas Tamada, The above code did work for me.
Similar situation, a pre element with maxHeight set by js to fit in allotted space, width 100%, overflow auto. If the content is shorter than maxHeight and also fits horizontally, we're good. If you resize the window so the content no longer fits horizontally, a horizontal scrollbar appears, but the height of element immediately jumps to the full maxHeight, regardless of the height of the content.
Tried various forms of the css hack mentioned by Jeff, but didn't find anything like it that wasn't a js bad-parameter error.
Best I could find was to pick your poison for ie8: Either drop the maxHeight limit, so the element can be any height (best for my case), or set height rather than maxHeight, so it's always that tall even if the content itself is much shorter. Very not ideal. Wacked behavior is gone in ie9.
Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.
To reproduce:
(This crashes the whole page.)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
X
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(Whereas this works fine...)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
The quick brown fox
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(And, madly, so does this. [No content in the div at all.])
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I found this :
https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
and this works for me perfectly so I decided to share this.