I start with a td cell like this
<td>
<span>123</span>
<input style="display:none;">
</td>
I'm looking for a way to style this so that the orignal content is hidden, the input box is shown and overflowing instead of resizing the td, and keeping the td sized to just its original content.
State A, which I have now, looks like this
[123][45aaaaaaaaaaaaaaa6][7aaaaaa89]
I want state B to look like this
[*input text field*aaaaaaaaa6][7aaaaaa89]
<td>
<span>123</span>
<input style="display:none;">
</td>
Is the correction for your markup, but what exactly is the effect you want to achieve and what have you tried so far?
<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>
in style define :
#hidden{
display:none;
position:absolute;
margin:.5em;
}
make script that shows the div on over (you will need to include jquery js ...)
<script type="text/javascript">
$(document).ready(function(){
$('table tr td').children().find('div').hover(function(){
$(this).show();
}
)
});
</script>
Figured it out. What I did not realize is that an element with position:absolute cannot be assumed to be defaulting to a 0,0 position, so I need to set the Left to 0 explicitly
<td>
<div style="position: relative;">
<span style="visibility:hidden;">123</span>
<input style="position: absolute; left:0; display:inline;">
</div>
</td>
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I have a very simple form laid our in a table with one row and two cells. I have a kendo NumericalTextBox in one cell and a Text Input in the other. I have the table width set to 100% and no width on the cells.
The Problem:
The problem is that the NumericalTextBox takes up more that 50% width in it's cell, and squashes up the Text Input.
I have tested this with a kendo DropDownList and it works fine. It just takes 50%.
Why is the NumericalTextBox pushing out it's cell to more than 50% and how can I stop it doing this?
I realize I can put a style="width:50%" on the table cells, but this is an overhead on larger forms, as if you add a cell you have to go and update all your other cells width percentages etc...
Ideally I just want to be able to say the width of the table is 100% and the cells will equally share that, and each control in each cell will take up 100% of the cell width.
I put together a demo page that shows what is going on:
HTML:
<div id="testContainer">
<strong>Numerical TextBox and DropDownList</strong>
<table class="mistro-form">
<tr>
<td>
<label>Numerical TextBox:</label>
<input data-role="numerictextbox"
data-format="n0"
data-min="0"
data-decimals="0" />
</td>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<table>
<div style="height:20px"></div>
<strong>Drop Down List and Text Input</strong>
<table class="mistro-form">
<tr>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<label>Include Title:</label>
<input type="text" class="form-control" />
</td>
</tr>
<table>
</div>
CSS:
table.mistro-form {
width:100%;
}
.mistro-form td {
padding: 5px;
vertical-align: top !important;
}
.mistro-form .k-dropdown, .mistro-form .k-combobox, .mistro-form .k-numerictextbox, .mistro-form .k-textbox, .mistro-form .k-numerictextbox {
width: 100% !important;
}
JavaScript:
$(document).ready(function() {
kendo.init($('#testContainer'));
});
Here is a fiddle of the above code: http://jsfiddle.net/codeowl/UQdGQ/6/
Thank you for your time,
Regards,
Scott
Ok I just worked this out. I just needed to set the table-layout css property to fixed;
eg;
table.mistro-form {
width:100%;
table-layout:fixed;
}
Hope this can save someone else some time ;-)
What I'd expect from the HTML below is that I'd see woo1 and woo2 overlapping while hiiii remains in its own cell away from the woos. However, everything runs together. Why?
http://jsfiddle.net/T4Jgx/
<table>
<tr>
<td style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</td>
<td>
<span>hiiii</span>
</td>
</tr>
</table>
Edit: Weird. When I remove the style from woo2, it appears to work. When I remove it from woo1, woo2 overlaps hiiii. Da fu...?
Edit2: For Reconstruct, your comment has to do with tables, so how come the exact same effect can be reproduced with this?
<div>
<span style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</span>
<span>hiiii</span>
</div>
Edit3: Arrghh... I believe I understand what is happening. By adding absolute positioning to the two spans, they are removed from the control flow and the first TD is collapsed. I am thinking about deleting this question, but maybe someone can just confirm what I just said and get the answer?
Wrap your TD content in a DIV and transfer position:relative to that.
<td>
<div style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</div>
</td>
I want to show two lines in <td>. And it is showing, next to each other.
<td bgcolor="White">
First Name
(on external website)
</td>
I want to be like below.
1st line bold and 2nd line will be small letters.
You could add a <br/> to force a line break and define some CSS classes for the font-styling:
<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span> <br/>
<span class="subtext">(on external website)</span>
</td>
Update:
For completeness, I'm also including what others have suggested: instead of using a <br/> element, control the line-break via CSS. This has the advantage, that you can change the behavior (remove the line-break) by simply editing the CSS:
<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>
Instead of using span elements, you could also use divs, which have the line-break by default (but it can be disabled by setting display:inline in the CSS).
<td bgcolor="White" >
<span style="font-weight:bold;">First Name</span> <br/>
<span style="font-size:6px;">(on external website)</span>
</td>
like that I suppose
As you want to style the lines differently, you need to put them in separate elements anyway, so if you use block elements they will end up as separate lines:
<td style="background: white;" >
<div style="font-weight: bold;">First Name</div>
<div style="font-size: 70%;">(on external website)</div>
</td>
Use <span></span> with the block attribute or <p></p>
<td bgcolor="White" >
<strong>First Name</strong><br />
<small>(on external website)</small>
</td>
You can put a p tag to indicate a newline like this.
<td>
First Name
<p>(on external website)</p>
</td>
Or use a br tag like this:
<td>
First Name <br />
(on external website)
</td>
The simplest solution is to add a <br /> as #M4N writes in his answer. But since it seems, that "First Name" is some sort of title, I would recommend to use the apropriate HTML tag. Also use CSS to style your table:
HTML:
<td class="white">
<h3>First Name</h3>
<span class="small">(on external website)</span>
</td>
CSS:
.white {
background-color: white;
}
.small {
font-size: .8em;
}
Note: Because <h3> is a block level element, the line break is "inserted" automatically
I am making an ASP.NET web control. In a table, how can I center a button?
Thanks
If you want to center an inline element set the container to:
text-align:center; eg:
<div style="text-align:center;"><input type="submit" value="Center Me!"></div>
If you want to center a block level element set it to:
margin:auto; eg:
<div style="margin:auto;">Im in the middle</div>
Easiest way is to put
<td align="center">
--content here--
</td>
This is very simple ..
<div>
//your html code ..
<table>
//data inside the table ..
<button align="center"> Click here </button>
</table>
</div>