I've set the height of my textarea to 500%, but for some reason it's not changing to 500%. I think it has something to do with it being inside a table, but I'm not sure what to change set the height correctly. For some reason, the width of the textarea CAN be change inside the table.
table,td {
border: 1px solid black;
}
textarea {
resize: none;
width: 100%;
height: 500%;
}
<table>
<tr>
<td>
firstTD
</td>
<td>
<form method = 'POST' action = 'updateProfile.php'>
<textarea id = 'textarea' placeholder = 'type something here...' onfocus = \"this.placeholder = ''\" onblur = \"this.placeholder = 'type something here...'\" maxlength = '10000'></textarea>
</form>
</td>
</tr>
</table>
The other answer solves the problem, but doesn't explain it. When you use % to define width/height in CSS, you are making it whatever% of that element's container' width/height.
When you set your textarea to be 100% of an otherwise empty <td>, it's not going to be very big.
Setting it to posistion:absolute will work IF none the ancestor elements are positioned. A simpler approach would be to just use something other than % to define your width and height. Try width:10em; and adjust it until you get it right.
Edit.
To answer a question in the comments: The reason using % to define the height works in this case, is because the empty cell has a height, but not a width. An empty table cell still inherits the height of the row, which is as tall as the tallest <td>. In this case there is another <td> that has content, giving the cell a height.
So, If there was another row, and one of the cells in the same column had content, then width would work with % too.
That said, it's not a good idea to use % for width and height in a table, because when the content in the table changes, your percentages will change. Also, when you use % as opposed to px or em, it will not stretch the parent container.
Edit again
I honestly didn't even notice the form element. Then your percents are relative to the height/width of the form element, not the <td>. There must be some padding giving your cells width/height but the form wouldn't have any dimensions.
Try setting position: absolute to textarea and give a position: relative to the parent. Also remove width and give left and right values as 0. But remember, this will make the textarea to overflow out of the content. Is that what you are expecting?
table,
td {
border: 1px solid black;
position: relative;
width: 350px;
}
textarea {
resize: none;
height: 500%;
left: 0;
right: 0;
position: absolute;
top: 0;
}
<table>
<tr>
<td>
firstTD
</td>
<td>
<form method='POST' action='updateProfile.php'>
<textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
</form>
</td>
</tr>
</table>
Or if you need something like this?
table,
td {
border: 1px solid black;
position: relative;
width: 350px;
}
textarea {
resize: none;
height: 10em;
width: 100%;
display: block;
box-sizing: border-box;
}
<table>
<tr>
<td>
firstTD
</td>
<td>
<form method='POST' action='updateProfile.php'>
<textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
</form>
</td>
</tr>
</table>
With this you can set size for text area
$("textarea").css("height", $("textarea").parent("td").height())
.css("width", $("textarea").parent("td").width())
Related
when I click on Id one div is coming. But I want to check if the div is exceeding the window then the div must hide.
Here is the sample code I have tried.
const User= () =>{
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
}
return (
<>
<Header />
<table>
<tr>
<td>Id</td>
<td>First name</td>
<td>Last Name</td>
</tr>
{
user.map((key, i)=>(
<tr>
<td onClick={(e) => openRequestDetails(e,i)}>{i}</td>
<td>{key.first_name}</td>
<td>{key.last_name}</td>
<td>{key.email}</td>
<td>{key.gender}</td>
</tr>
))
}
</table>
<div id="rId" />
</>
)
}
export default User;
I am displaying the div is exact same row where I click. But when I click on the last IDs the div is exceeding the size of the window. So I want to check if the div is exceeding the windows then the display should hide.
I just want to check when I click on id's if the div is exceeding the windows then I should not display that div otherwise it should display.
[![enter image description here][1]][1]
Here is the sample CSS file.
div#rId{
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid red;
}
Can anyone know how to solve this problem.
We can write simple javascript code inside the function. can anyone help me to solve this problem?
Let's look at how it's decided whether to show the pop up or not:
Here's the code where the test is made:
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){ //This is almost always true as popupHt is small
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
What you need to do is test whether the popup when placed with its top the same as the td's top will have its bottom below the bottom of the viewport.
The bottom of the popup will be at: clkPosTop + popupHt
The bottom of the viewport is at window.innerHeight
So the test should be
if ( (clkPosTop + popupHt) < window.innerHTML)
Ok, I think your problem can resolve use only css.
But, this can change depending on what you want to do.
If your problem is only window... use #media, then, ok, go to css.
table {
width: 100%;
border-collapse: collapse;
#media (min-width:1024px) {
max-width: 1024px;
}
}
Ok, we delimit width of our div, but many things to happen now, then
rId maybe disturb our configuration, then, we need make this element responsive too.
td {
display: inline-flex; // or display: inline-grid;
border: 1px solid red;
}
div#rId {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
ok, I think this resolve this issue.
But, this javascript code... I don't believe i need position css with javascrip to open modal, comment if this helpfull. ;D
I have a webpage with code I cannot change which is set up something like this:
<table style="width: 750px; margin-left: auto; margin-right: auto">
<tr>
<td>
<table>
<tr><td><div id=1></td></tr>
<tr><td><div id=2></td></tr>
<tr><td><div id=3></td></tr>
<tr><td><div id=4></td></tr>
</table>
</td>
</tr>
</table>
I'd like to add an element (via userscript) to the right of the outer table which lines up with div 1, 2, 3, or 4. Is there a way to do this? Maybe measure the current position of the elements then absolutely position relative to the outer table?
(The actual HTML is far more messy; there are many more siblings and parents, but this is the heart of the code.)
Position an element adjacent to table rows
Create and append the desired element to your table. Then create and add custom styles that reflect the position of the table row. I've written down some comments below to help navigate the code.
// Setup additional element
const yourContent = document.createElement("div");
yourContent.setAttribute("class", "content");
const yourText = document.createTextNode("Lorem ipsum");
yourContent.appendChild(yourText);
// Find the element you would like to attach to
const graphElem = document.getElementsByClassName("rows");
// Set the styles to be added
const cssTemplateString = `td > .rows > .content{
position: absolute;
left: ${graphElem[0].clientWidth}px; // For element to appear on the left side set to "-" ( negative value )
height: calc(${graphElem[0].clientHeight}px +2px); // The 2 extra pixels are for the border
width: calc(${graphElem[0].clientWidth}px + 2px);
background: white;
padding: 3rem;
border: 1px solid gray;
top: 0;
}`;
const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
// Add styles to the head tag
document.head.insertAdjacentElement("beforeend", styleTag);
// Only required for this example
for (let i = 0; i < graphElem.length; i++) {
graphElem[i].addEventListener("click", function (event) {
event.target.appendChild(yourContent);
});
}
td > .rows {
border: 1px solid gray;
width: 8rem;
padding: 3rem;
background: whitesmoke;
}
td {
position: relative; /* The additional content will be positioned relative to this */
}
Demo : https://jsfiddle.net/hexzero/82bpaL4e/
If you click on the table row in the demo, the content will appear on the right.
I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle
I have an html table that I souped up to allow for sorting, resizable/movable columns, and a fixed header row. The fixed header caused a disconnect in the header cells and their corresponding content cells so that resizing the <th> did not resize the <td>'s in that column. As a work-around, I added some code to manually change the width of the content of the relevant <td> elements when the <th> is resized. It seems to work fine in most cases, but sometimes the column widths still don't line up exactly. I used chrome dev tools to examine the html during one of the hiccups, and although the width style on both the <th> and <td> is the same, the actual width ( as returned by $(elt).width() ) was 3px less than the specified width for the <th>. Does anyone know what might cause this?
EDIT: I realized that this only happens when I resize the columns so that the total width of the table is larger than the parent div. The content cells overflow and allow me to scroll horizontally, but the <thead> stays its fixed width and adjusts some of the <th> elements smaller to compensate.
CSS:
.blotter {
overflow-y: hidden;
overflow-x: auto;
position: relative;
border-left: solid thin silver;
}
.blotter-table {
table-layout: fixed;
margin-bottom: -1px;
}
tbody {
height: 400px;
max-height: 400px;
overflow: auto;
}
thead>tr,tbody {
display: block;
}
td>div {
overflow: hidden;
}
Markup:
<div class="blotter">
<table class="table table-bordered table-hover table-condensed blotter-table">
<thead>
<tr>
<th id="tradeaggregation_numTrades" draggable="true" style="width: 422px; cursor: pointer; opacity: 1;"># Trades<img src="resources/img/down_arrow.png" class="pull-right" id="imgSort" style="opacity: 1; cursor: e-resize;"></th>
<th id="tradeaggregation_listValues" draggable="true" style="width: 305px; cursor: pointer; opacity: 1;">List Values</th>
<th id="tradeaggregation_mgmtId" draggable="true" style="width: 66px; opacity: 1; cursor: e-resize;">mgmtId</th>
<th id="tradeaggregation_sizeSum" draggable="true" style="width: 78px; cursor: pointer; opacity: 1;">Size Sum</th>
</tr>
</thead>
<tbody>
<tr id="tradeaggregation0">
<td><div id="tradeaggregation0_0" style="overflow: hidden; width: 422px;">8,113</div></td>
<td><div id="tradeaggregation0_1" style="overflow: hidden; width: 305px;">4RAJA-SUN null </div></td>
<td><div id="tradeaggregation0_2" style="overflow: hidden; width: 66px;">10,831,124,369</div></td>
<td><div id="tradeaggregation0_3" style="overflow: hidden; width: 78px;">19,048,548</div></td>
</tr>
</tbody>
</table>
</div>
Let me first clarify exactly the behavior I was looking for. I needed a table that would allow scrolling vertically of the tbody overflow while having a fixed thead. In addition, columns could be resized, and if the total size of the columns causes the table to become wider than the parent container, the overflow should be scrollable horizontally rather than adjusting the column widths to stay within their parent width constraints. That being said, I accomplished it using my markup/css from above, but I used javascript to explicitly increase the width of the table when a column is resized such that the total width of the columns is now greater than the viewing area.
var cols = this.$el.find("tbody>tr:first td");
var newWidth = 1;
for ( var i = 0; i < cols.length; i++) {
newWidth += $(cols[i])[0].offsetWidth;
}
var minWidth = $(this.$el.find(".blotter")[0]).width(); // parent div
if (newWidth < minWidth) newWidth = minWidth;
this.$el.find("table").width(newWidth);
How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck.
Searching SO only got me results when I do know the size of the image. How do I do this with a table?
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.
Pretty easy, this is the format of all my images/containers:
<div class="photo"><img /></div>
<style type="text/css">
div.photo { height: 100px; line-height: 100px;text-align:center; }
div.photo img { vertical-align:middle;}
</style>
The CSS Method
You can set an explicit height and line-height on your container to center an image:
<div id="container">
<img src="http://placekitten.com/200/200" />
</div>
<style>
#container { height: 600px; line-height: 600px; text-align: center }
#container img { vertical-align: middle }
</style>
See it in action: http://jsfiddle.net/jonathansampson/qN3nm/
The HTML/Table Method
The table method follows. It's merely utilizing the valign (vertical-align) property:
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
A jQuery Plugin
Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter
With a table:
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. You will need to define a height on table so it is taller than your image.
A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.
HTML:
<div id="imgContainer" style="position:relative;">
<img style="position:absolute;" />
</div>
JS:
$('#imgContainer > img').each(function(){
//get img dimensions
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
//set img position
this.style.top = Math.round((div_h - h) / 2) + 'px';
this.style.left = '50%';
this.style.marginLeft = Math.round(w/2) + 'px';
});
DON'T USE TABLES. Terrible practice unless your using tabular data.
The best way to do this is with the following code.
<html>
<head>
<title></title>
<style media="screen">
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;*/
}
</style>
</head>
<body>
<img class="centered" src="" width="100" height="100" alt="Centered Image"/>
</body>
This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.
Using CSS there is no easy way to vertically align an image center. Though to align it center horizontally you can use the following
<img src="randomimage.jpg" style="margin: 0px auto;" />
I would not reccommend a table for laying out an image as it is not really good practice anymore. Tables should only be used for tabular data.
There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)
If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:
<div style="display: table; height: 500px; width: 500px;">
<img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>
Just pick appropriate height/width for the containing <div>.
If you don't mind losing the img-tag, you can use background-image to center an image in a container block.
markup:
<div class="imagebox" style="background-image: url(theimage.png);"></div>
style:
.imagebox
{
width: 500px;
height: 500px;
border: solid 1px black;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Basically, you should be able to create a table in HTML, and the styling for the td tag should set the text-align attribute to center and the vertical-align attribute to middle. And, you can mess with other attributes, like borders, padding, etc...
I end up doing the below. Tested with firefox, chrome, IE8 and opera. All good.
table.NAME
{
background: green; //test color
text-align: center;
vertical-align:middle;
}
table.NAME tr td
{
width: 150px;
height: 150px;
}
html
<table class="NAME"><tr>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
...