I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
Setting Max Width can also be useful as it makes a fix width for all cells
I also had some issues, and finding a solution landed on this page but didn't work the given suggestions for me. so i have added any tag <div style={{width:300}}> <p style={{width:300}}> inside <Tablecell> like this and it worked.
<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>
hope this works for others also
Related
what I'm asking about may be a bit too specific to be realistic, but what I'm looking for is a way to have a table/grid in a webpage that is composed of colour-coded cells. Upon clicking a cell, it expands to reveal the previously hidden contents of the cell. Ideally this would be accompanied by some sort of jquery-esque smooth animation.
I'm not asking necessarily for a complete solution here, but rather where I would need to start looking in order to be able to create something along these lines.
What I'm thinking is something that looks like this before you click on a cell:
And this afterwards:
Thanks in advance,
Kez
Use Javascript
Try this
<td id="name1" onclick="myfunction()"><div id="content"></div></td>
Java script
<script type="text/javascript">
function myfunction()
{
$("#content").html("Cell Content Become Visible ");
}
</script>
Thanks for the tips, guys, I actually managed to get pretty much exactly what I wanted using your advice. In particular the event.target property came in useful. Thanks, Izzluca.
I have created a JSfiddle showing my solution.
I gave a class ("tlight") to every cell I wanted to be able to resize, and used the following jquery code:
$(document).ready(function () {
$('.tlight').bind('click', resizeAll);
function resizeAll() {
$('.tlight').animate({
height: 50,
width: 50
}, "slow");
$(event.target).animate({
height: 100,
width: 100
}, "slow");
};
});
Kez
Not sure I am getting the problem...
It looks like you have to add a listener for the click event, on every td or maybe, ligther, on the tbody of the table: checking the "event.target" property you could be able to get to the td that raised the event (I am assuming you are working with an HTML table).
For the content, you could store it directly inside the cell itself, maybe inside a div wrapper; you can set the css property overflow on the wrapper, showing the content as much as you want (you should have to specify the height/width of the wrapper and "overflow:hidden;" on it, if I recall correctly). The cell will resize accordingly with its content.
At the click handler, you can change the overflow property to "overflow:visible;": in that case, all the content will be shown (or just change the height/width to show more of it).
If you don't set any fixed height for the table's cells, the row will get the height of the highest cell, so you don't have to fix the row's height when you explode the cell's content.
PS: Maybe interesting: using "table-layout:fixed;" you should be able to assign a percentage height to the rows, like:
table {
height: 300px;
}
.row1: {
height: 50%;
}
.row2: {
height: 50%;
}
I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).
But, by default, tables seem to never exceed the size of their containers!
I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?
Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.
Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent comment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.
Set the cells up so they do not wrap
td { white-space: nowrap; }
Depending on what you mean by "fit everything", you might want to define a min-width for your tds:
min-width:250px;
That way, each cell has a reasonable size to display some text, on one or more lines (or just one if you set them as nowrap as epascarello suggested). If you are displaying fixed-size element (such as images), the table should expand by default.
CSS overflow should fix your issue take a look at this post http://css-tricks.com/the-css-overflow-property/
Here's the quick-and-dirty JavaScript I'm using now:
$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');
#table-container refers to a div surrounding the table; the table has an id of tblMain.
I know this won't work if the table is 10 times wider than the current screen size, but a general solution should be pretty easy to implement.
EDIT 3 Can I get some more jQuery suggestions please? I've tried so many different CSS options, but Mozilla doesn't seem to want to cooperate, I would like to do something that I know will work...
So I have this 2 row table and I am trying to get the Picture caption to all be at the same height while leaving the picture centered in the <td>, and I am thinking that the best way to do this is using jQuery and the offset() function. However, I am not really sure about where to get started with this and looping through each <td> in the table.
EDIT: Trying to keep the images centered in the <td> so vertical-align: bottom unfortunately won't work...
EDIT 2: I also use 2 different styling sheets... one for IE and then one for everything else... the IE is fine, because I can set position: relative to my <td> and everything still works... the styling sheet for everything else it doesn't work for because in Firefox if I set it to position relative it ends up stacking all of the captions one on top of each other and places it in lala land. So, is there a way to include in a jQuery script if browser != IE then...?
I guess here is my mental process in how I want to try and go about doing this...
Outline:
For each <tr> go through every <td>...in each <td> get the lowest y position of the span
When there are no more <td>'s in the <tr> go through the row 1 more time and set all of the spans y position equal to the lowest y position found earlier.
Then go to the next row.
Fiddle: http://jsfiddle.net/58u4g/14/
I am a bit ashamed to be putting a fiddle up here without any jQuery code in it especially when I am asking for it, but I have yet to try looping in jQuery, especially looping through the rows of a table... Still doing some research on it, but I figured I would see what all of your thoughts were.
Thanks in advance for all the help!
Something like this is probably what you're looking for. I'm sure there are ways to do it with CSS, so don't give up on that yet.
Basically I'm capturing the height of the tallest image in the group and changing all of the images heights to that size. Alternatively, you could make a wrapper around the image and change the height of that, so you don't distort the image dimensions.
EDIT: This finds the offset of each span in a row and sets them all equal. See if that works for you (test in chrome/ff)
$('tr').each(function() {
var height = 0;
var $tr = $(this);
$tr.find('a span').each(function() {
$(this).offset().top > height ? height = $(this).offset().top : '';
}).promise().done(function() {
$tr.find('a span').each(function() {
$(this).offset({ top: height });
});
});
});
Try it here: http://jsfiddle.net/58u4g/28/
I recommend following for a neater display:
#posiflex_directory td {
width: 215px;
padding: 5px;
border: solid 1px;
**vertical-align:top**
}
And your spans arent acting like absolute. To fix it:
#posiflex_directory a {
color: inherit;
height: 175px;
position: relative;
float:left;
}
You will see that all spans will be at the bottom as you want.
I am trying to calculate the total width of a span in HTML including both the left and right bearings of the first and last characters. I have already tried Javascript's offsetWidth and jQuery's width & outerWidth functions, but neither of them return the correct value I am seeking. Here is an example of what I mean. Running in Firefox the calculated width is 135px, while measuring with the Web Developer plug-in gives an actual width of 141px.
Edit
Here is what I've tried, and here are the values it gives me:
offsetWidth = 135
jQuery.width() = 135
jQuery.outerWidth() = 135
None of them are calculating the 6px overhang on the 'f' (which would make the width 141).
Sadly, no straightforward solution exists because it is outside the realm of the box model -- the browser itself does not recognise the overhang of the letter 'f' when rendering layout. You can see this for yourself if you wrap the <span> within a <div> of width: 135px, and overflow: auto -- No scrollbars appear, the overhang is simply cut off. This is also why firebug reports the width without the overhang.
As #Aaron pointed out, the problem doesn't exist with monospaced fonts as no letters extend beyond the character's fixed-width box in those fonts.
The only way to find the real width is through pixel-based (rather than layout-based) methods. I can think of one way: draw the same text, with the same font, onto a <canvas> element, and measure the pixel width that way.
Actually, I think the problem is the font itself. I changed the jsfiddle to font-family: monospace, and it was all contained within the grey box (and calculated correctly, as a result). Even leaving it as the original font, but changing the sample to "aaa" or "mmmm" worked great. It's just the "f" glyph in that font that's blowing it for you.
Unfortunately, I don't know of a DOM attribute that accounts for that. Not sure that's much of an answer, but I don't have access to comment on the question and thought these findings might help point you in the right direction...
How about jQuery's .width()?
<span id="spanId"> ... </span>
and
var w = $('#spanId').width();
I seem to be getting an annoying horizontal scrollbar when using autowidth=true in IE
What is going on here and how do I get rid of it?
I got perfect Solution. The problem is in CSS. In ui-jqgrid.css the table layout is in Fixed. Make it as auto it will work perfectly. I just copied the same class i.e.,
.ui-jqgrid .ui-jqgrid-btable
{
table-layout:auto;
}
Make your grid tall enough to contain all the rows. The horizontal scrollbar is there because the vertical scrollbar is taking up some of the width normally used by the rows.
Set the scrollOffset option to something like 20 - 30, this will fix the horizontal scrollbar adjustment problem.
Set the scrollOffset to 18 - it's solve the problem.
Quick and effective.
Thanks, Corey Schomer!
setting table-layout: auto could be slow. if you have lots of data
this is from w3school (http://www.w3schools.com/cssref/pr_tab_table-layout.asp)
Automatic table layout algorithm (this is default):
The column width is set by the widest unbreakable content in the cells
Can be slow, since it needs to read through all the content in the table, before determining the final layout