I have a list view with 10 columns and I want each row to be the exact same size.
The problem is that while the 9 columns are made up of 1-2 words, 1 columns can be made up of an unknown amount of words meaning the format of each row will be different, therefore screwing up the view.
I have tried formatting the odd column's <td> like width="200" height="50" style="overflow:scroll" but still, that shows the scrollbars (including on cells which don't need it) and it is actually still expanding the height to accommodate all text (the scrollbars are visible but not usable)
How to format that cell to be the same for each row?
overflow:auto will only show scroll bars when they are needed
table-layout:fixed will stop your cells resizing
Also overflow-y:scroll;overflow-x:hidden for CSS3 depending what support. I know it works on IE8 and firefox, chrome etc. But these allow you to specify just vertical scroll
If you are looking for wrapping the text, the you can do that using CSS. Apply the CSS class to your .
Allow long words to be able to break and wrap onto the next line:
.wrapText {word-wrap:break-word;}
or
.wrapText {word-wrap:normal;}
normal - Break words only at allowed break points break-word - Allows unbreakable words to be broken
Eg.
<td class="wrapText"></td>
OR
<td style="word-wrap:break-word;"></td>
First set-up your table:
table
{
width: 0px;
table-layout: fixed;
}
The 0 pixel width will be ignored because we'll specify a width for the cells but it's needed to make the fixed layout work (as alternative you may use the right width). Then you have to apply some formatting to the cells:
table td
{
width: 200px;
height: 100px;
}
table td div
{
width: 200px;
height: 100px;
overflow: auto;
}
And your cell must be like this:
<tr>
<td></td>
<td><div>Here the long content</div></td>
</tr>
Set overflow: hidden to truncate the text when it overflow actual height
try this
<table border="1" style="height:50px;width:200px;table-layout:fixed">
<tr>
<td style="height:50px; width: 100px;">
Test
</td>
<td style="height:50px; width: 100px;overflow:hidden;border-collapse:collapse;" nowrap>
<nobr> This is a long tex to show how the cell trancate a text, can you see it ?</nobr>
</td>
</tr>
</table>
The easiest way around this an asp:TextBox it seems, just created so it looks like a label.
All of the answers above work on an individually created table but I'm just not too familiar with the listView format and probably not setting something somewhere right.
Related
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
I have two gridviews in a aspx page, each bounded with similar data. Here is the screen shot.
The width of each column in the grid is defined in % and are the same for both the grids. Even then the output is not as expected, but slight variations in the column width. I need to make sure both the grids columns should appear same. Does any one know how to fix this (.net/javascript). Thanks for the help in advance.
while building the table set the class for each column individually, and then set the width in CSS
<table style="width: 100%;">
<tr>
<td class='firstCol'></td>
<td class='secCol'></td>
<td class='thrdCol'></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
and style
<style type="text/css">
.firstCol
{
width: 10%;
}
.secCol
{
width: 20%;
}
.thrdCol
{
width: 30%;
}
</style>
You could use CSS and classes. For example on table rows you would like to keep the same you can write
<tr class="specialrow">
or for certain cells
<td class="specialcell">
You would write the css like this
.specialcell
{
width:100px;
}
Perhaps a jsfiddle would help further?
A way to ensure both tables are equals is to use just one table. It's not the best solution, but it will get the job done. In order to put the separation between them, you will need to put a <tr colspan="14"><td> </td></tr> between them.
Again, it's not the best solution. If from your business perspective it makes sense to have it this way (the tables shows information about the same thing and makes sense to think of it as a whole), then you can use it without guilt.
Anyway... looking for some information about having several s and s in the same table lead me to this answer that has a lot of useful information about how to do it: Multiple thead/tbody design
you may try using the css table-layout:fixed in both tables and then specify the widths for each column in the css.
I am writing a webPage using asp.net and c#.
I want to divide my webpage into 2 columns such as in one I will have buttons that change the view in the other column, without "stepping on" the content of the first column.
example:
button 1 | :) a picture...
button 2 |
I tried to use divisions but I think I'm not using them properly.
any help would be great!
thanks!!!
Or code the divs like so:
<div class="wrapper">
<div class="left">
button 1
button 2
</div>
<div class="right">
a picture
</div>
</div>
Then the css is:
.wrapper {
width: 800px;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 600px;
}
You can change the widths to whatever you want, just make sure that .left width + .right width isn't greater than .wrapper width. Also make sure that the content of the columns doesn't make them wider (i.e. if your picture is wider than 600px, it'll also break the layout).
You might try posting a bit of code so that we can see what is going on. It sounds like a css problem which is more general than asp.net and c#.
if you divide your page to two web page then you use frame in javascript
for it's refrence go to www.w3schools.com
You want a table :)
<table>
<tr>
<td>button 1</td>
<td>a picture</td>
</tr>
<tr>
<td>button 2</td>
<td>...</td>
</tr>
</table>
I have a login page that has several textboxes on the page, one of them has the mode set to "password". This page worked previously but we've recently noticed (since an IE7 update) that the textbox that is specified as a password textbox is not as wide as the other textboxes on the page. If I remove the TextMode="Password", the textbox resizes to match the others.
I've checked for oddities on the page when the page displays using the IE developer toolbar, but it all looks ok.
The textbox code is fairly basic:
<tr>
<td>
Username
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server" TabIndex="2"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txtPassword" TextMode="Password" runat="server" TabIndex="3"></asp:TextBox>
</td>
</tr>
I've found one other person asking about this on the web and they fixed it by applying a css to all the input controls on the page, but I haven't managed to get that to work either.
The best way to ensure that all of your controls will be of the same size is via style (either inline or in css).
I've found that if you use the following CSS:
input, select { font-family: sans-serif; }
this will make the text and password boxes be the same width. The font-family does not have to be sans-serif, but it must be defined.
This may be a better solution as it seems to fix the issue rather than band-aid over it by using an explicit width in your CSS. You can now just use the default font settings of the browser by using the generic font families or be explcit if you have a particular font you are using for the page.
It may help if you provide a Width="" property to your textboxes. That should force them to match up in terms of width even those they have different text modes.
If you specify a value (like 20) for the TextBox.Columns property (which maps to the <input size="" /> attribute) they'll match up. If you want to use CSS, you should try to avoid an inline style (which the TextBox.Width property creates).
You may try setting Width property of all the text boxes to be same. 150 would be a good value.
I think it is normal to have different widths for password-type and non-password-type textboxes when you specify the size as "columns", as the width of a textbox is calculated by multiplying the width of the largest character in the font (say, "m") by the requested number of columns.
When passworded, the largest character is always the bullet (all chars are bullets), so the width is different (when using a proportional font obviously). To solve this problem, specify a width in pixel and not columns, i.e.: style="width:250px;" (or use a non-proportional font).
I recently ran into this problem with internet explorer 11. I tried everything here and nothing worked, but then stumbled onto this post. What solved it for me was doing this:
<tr>
<td style="width: 1000px; text-align: right;">User Name:</td>
<td style="width: 200px; text-align: right;">
<asp:TextBox ID="UNTextBox" runat="server" style="width: 200px;"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 1000px; text-align: right">Password:</td>
<td style="width: 200px; text-align: right;">
<asp:TextBox ID="PassTextBox" runat="server" TextMode="Password" style="width: 200px;"></asp:TextBox>
</td>
</tr>
I HAD to put in style="width: 200px;" straight into the asp:TextBox tag or the sizes just would not match up in IE11.
Hope that helps someone