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
Related
I'm facing problem regarding the grid-view template. It shows sum of individual as well as shows grand total. How can it be tackle ?
I'm trying to design my grid same as shown in picture using C#.net.
Format for my grid-view:
You can do this easily with Asp.net Repeater control.Footer template will help you to hold summation
<FooterTemplate>
<tr style="border-top: 1px solid Grey;">
<td colspan="2">
<strong>Total</strong>
</td>
<td>
<strong></strong><asp:Label ID="CartTotal" runat="server" Text='0' /></strong>
</td>
</tr>
</table>
</FooterTemplate>
in c# you will bind data like below
CartListRepeater.DataSource = Yourdatasource;
CartListRepeater.DataBind();
Then add data to Footer after binding data.
Control FooterTemplate =CartListRepeater.Controls[CartListRepeater.Controls.Count - 1].Controls[0];
Label lblFooter = FooterTemplate.FindControl("CartTotal") as Label;
lblFooter.Text = "0"//This is your total value;
Hope this will help you out.
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.
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 developed a web page in ASP.Net (C#). In my machine screen resolution is 1280*1024, i designed according to this resolution, so when i run the page i have no problems in viewing it.
But when i run the page in someother machine with different screen resolutions like (1024*768), there are some changes in the allignment of the text boxes and labels in the page.
May i know how to set the page according to different screen resolutions automatically? I need to view the page same as i look in my machine. How to do that? Can anyone please guide me to do that?
I'm using a MasterPage aswell.
Thanks in Advance.
When design form, you have to use width as a percentage instead of a fixed width.
I think you have used something like...
<table style="width: 1000px">
<tr>
<td style="width: 1000px">
</td>
<td style="width: 1000px">
</td>
</tr>
when you need to use something like...
<table style="width: 100%">
<tr>
<td style="width: 50%">
</td>
<td style="width: 50%">
</td>
</tr>
using some grid CSS will help you to achieve that: Check BlueprintCSS http://www.blueprintcss.org/
I am using the below code inside of a table:
<tr>
<td>User Language:</td>
<td>
<asp:DropDownList ID="Language" runat="server" Width="200px">
<asp:ListItem Selected="True">English</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td><span class="important">*</span>Company:</td>
<td><asp:TextBox ID="Company" runat="server" width="200px" /></td>
</tr>
When the code appears on the site the <asp:Textbox> control is 205px and the <asp:DropDownList> is 200px wide. What is causing that? They both are set to a width of 200px.
Because the textbox has 2px of border and 1px of padding on the sides.
The DropDown is resized regarding the size of the options you provide in it. So, If you have longer options, you will get longer drop down. In addition it takes more place for the arrow that is the right corner.
Not quite related, but here's a quick tip that will save you a lot of headache down the road:
Never use ASP:Textbox or ASP:DropDownList
<textbox runat=server> and <select runat=server> will work in every single case you could ever need, and they don't add any confusing properties such as "width" that don't quite work right.
Use real HTML tags with CSS classes for everything you do, and only add runat=server to the ones you actually intend to mess with from the backend.
When you insert data in the dropdownlist it resizes if you do not set the width property, but if you set the width it will not resize.