I have a problem with an <asp:GridView>
Rows are too tight from each other so i want to give them a fixed height. I tried using RowStyle's and AlternatingRowStyle's cssclass. In my css I have:
.new_fila_exp_ini
{
margin:0 auto 100px auto;
}
But it doesn't use the 100 pixels.
I think it's because it used to be a HTML table before that I converted into a <asp:GridView> so the styles doesn't apply correctly.
But I don't know how to do it.
Any ideas??
Setting margin on a table row won't work very well, you're better off setting padding. In order to do that more effectively, set the padding on each table cell, like:
.new_fila_exp_ini td {
padding-bottom: 100px;
}
See how you get on with that.
Related
When I set the height of an option in a select listbox, the text in the option is aligned top by default. How can I make it be aligned in the middle? (I tried the obvious vertical-align and line-height, didn't work)
Test: http://jsfiddle.net/uWszr/
select {
width: 128px; height:150px;
padding-top:6%;
}
option {
height: 32px;
}
height of select, padding-top of select - should be calculated, depending on the overall height of all option elements.
I think for universality should make a calculation script on jQuery and substitute the appropriate values.
at least means I can not see the css universal solution
Use padding for select to align the text in the option.
select {
width: 128px;
padding:10px 0;
}
This is not an optimal solution to align the text in middle. But it'll be useful as temporary solution.
I have table that I want to remain dynamic meaning that I don't want to assign column widths in either pixels or percentages.
For the most part the table does a good job of assigning reasonable column widths. The problem is that occasionally I need to load up one or more TDs with data that is unusually wide. The result is that the entire table layout is shifted to deal with the extra wide TD content.
I want to somehow markup that one TD or its content to have it just fit in the existing layout without affecting with column widths. I DO want the TD height to be affected.
Basically I want to FORCE the content to wrap in the existing TD without the TD trying to accommodate the content by adjusting the column widths.
<table>
<tr><td>Field Label #1</td><td><input name='#1'></td></tr>
<tr><td>Field Label #2</td><td><input name='#2'></td></tr>
<tr><td>Field Label #3</td><td><input name='#3'></td></tr>
<tr><td>Field Label #4</td><td><input name='#4'></td></tr>
<tr><td> </td><td class='ignoreContentWidth'><div>Super long message or notice to user that I want to wrap naturally but I don't want it to have any effect on the table layout..</div></td></tr>
<tr><td>Field Label #5</td><td><input name='#5'></td></tr>
</table>
I have tried the following CSS which gets me part of the way but now the TD also ignores the content height.
.ignoreContentWidth
{
/* display: none; */
position:relative;
}
.ignoreContentWidth div
{
position:absolute;
top:0;
}
A fiddle that shows the problem.
Fiddle with CSS
Remove the CSS in the fiddle to see what I don't want.
Using
.ignoreContentWidth
{
width:1px;
}
seems to do the trick.
It's a bit hacky, but making the width of that cell as small as possible brings it down to the width it would have been had it been empty. The text wraps and forces the cell height to change as required.
If you want that, you need a width at least somewhere on your table.
You could use CSS width or max-width. Also, remove the absolute positioning if you want the height to adjust accordingly. Try this:
.ignoreContentWidth
{
/* display: none; */
position:relative;
}
.ignoreContentWidth div
{
max-width: 300px;
}
Good luck!
EDIT: Here is a JS Fiddle for you: http://jsfiddle.net/MCHdb/
I try to adjust table column width ('Author' column on the next link http://deploy.jtalks.org/jcommune/branches/1?lang=en).
I have added the min/max attributes to .author-col style:
#topics-table .author-col a {
font-size: 11px;
min-width: 140px;
max-width: 140px;}
However, target column still has 418 px width. I don't see any other overriding width styles. Could you help me to solve this issue and thank you for any advices.
min- and max-width aren't specified for tables. quotig the w3c:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
if you want to achive a fixed width for your colums, you might want to try using table-layout: fixed; on your table - but please note that this will fix all other columns to their given width, too.
EDIT:
taking a look at your example again, it seems to be much more simple in your case: you havn't given a width to your table cells but the a contained in them. change your css to this:
#topics-table .author-col a {
font-size: 11px;
/* widths are useless here, because an <a> is an inline-element */
}
#topics-table .author-col {
/* give your .author-col a width instead */
width: 140px;
}
I've got a <table> that contains a few columns whose textual value can be too long, therefore I wan't to "trim" them using "text-overflow: ellipsis" and "overflow: hidden" on the <td>'s in CSS. I noticed that in order for me to do that I have to set "table-layout: fixed" on the <table> which then forces me to specifically set every single column's width.
I didn't want to apply a bunch of class names or IDs to the columns, so I used the following CSS solution:
#error-list th:nth-child(1),
#error-list th:nth-child(6) {
width: 53px;
}
#error-list th:nth-child(2) {
width: 131px;
}
#error-list th:nth-child(3) {
width: 226px;
}
#error-list td:nth-child(3),
#error-list td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The column list is fixed, so it isn't a big deal that I'm using the column's ordinal to style it, and I'm happy that the markup is leaner. This solution works great, but I wanted to ask whether there is a better solution.
In order for the above to work, I had to set the column width's such that it took account for padding and border as well. That way it would work in IE, Chrome and FF. It feels pretty nasty doing it this way, but when I tried using "-webkit-box-sizing: content-box" (so I could set the column widths without having to also worry about padding/border), Chrome didn't respect it.
Am I doing something wrong? Is there a better way? I don't mind having to hard-code every column width, but I hate having to use the border-box box-sizing.
I'm not sure if this is what you're looking for, but this is what I came up with:
http://jsfiddle.net/e7ZKq/1/
If you set a max-width to your td rule along with your other properties, the cells will fit to the content until you hit that max width and then it will cutoff the remainder with the ellipsis.
here is the code i'm having a problem with:
http://jsfiddle.net/crptS/
Basically I have a table, and the width of the table is 100%
table
{
border: 1px solid #ffda95;
border-collapse: collapse;
width: 100%;
}
now I have 1 column which contains 3 icons and I dont want this column to scale with the page. it should have a width of 25px. the td has the class tdmaxwidth60
.tdmaxwidth60
{
width: 25px;
min-width: 25px;
max-width: 25px;
}
however. in Firefox and IE this column still scales with the page, be it slightly different than in jsFiddle. it looks like the width is working (on load width is correct) and the min-width too works, when you have the page fullscreen and you make it smaller it stays the same width. however when you load the page on a small page and then make it fullscreen the width of the column does stretch.
any ideas how to fix this?
In the jsfiddle you posted 4 columns have fixed widths. Therefor they all scales to suit that width of the table.
If you only set the width of the first column then the other columns will scale to fit. And the first column will stay the same.
When you're saying you've got a column you do not want to scale, shouldn't you give your trmaxwidth60 class to every td within that column instead of the tr? Please correct me if I'm wrong.
you can use white-space: nowrap; for the .trmaxwidth60. Of course the default use is for text, but I think will do the job for the icons also.