I am using trying to style a .NET DropDownCheckList control to stylistically and functionally fit in one of my user controls.
Currently, I'm working the DropDownCheckList implementation as follows (I plan to convert the table structure to <div> and CSS styling once I figure out how to resolve the issue):
<asp:Panel ID="CmbCkBxPanel" runat="server" Height="20px" Width="160px" BackColor="White">
<asp:HiddenField ID="hfEmptyText" runat="server" />
<table id="CmbCkBxTable" style=" background-color:White; table-layout: fixed; height: 20px; border-collapse: collapse; border-style: solid; border-width: 1px; border-color:Black;" cellspacing="0" cellpadding="0" width="100%" runat="server">
<tr id="rowDD" style="border-style: none;background-color: White;" runat="server">
<td style=" white-space:nowrap;" valign="middle"><asp:textbox id="DDTextBox" ReadOnly="true" style="cursor: default; vertical-align:middle;" runat="server" Width="100%" ToolTip="" BackColor="White" font-names="Arial" BorderColor="Transparent" BorderStyle="None" ></asp:textbox></td>
<td id="colDDImage" width="16">
<asp:Image ID="btnImage" runat="server" /></td>
</tr>
</table>
<div style="z-index: 200; background-color: White; display:none; border-style:solid; border-width:thin; border-color:Black;" id="listdiv" runat="server">
<asp:CheckBoxList ID="CBList" runat="server" width="100%" style=" text-align:left; background-color:White;" RepeatColumns="1">
</asp:CheckBoxList>
</div>
</asp:Panel>
On page load, the control looks like this (note that I'm using it for the Account and Brand filters):
When I select the dropdown, however, it pushes the whole div downwards like so:
Question: Is it possible to overlap the div below, rather than pushing the blue container div downwards? Or is this an issue with the structure of my page?
If you need the container divs and their respective CSS to help me troubleshoot, I can include those.
Thanks!
If you don't want a div to occupy space in your page then you need to set it's position to absolute.
Related
I am trying to use Ajax Calendar v3.0.20820.6783 for my Asp.net-3.5 project.
It works well but I have a CSS issue that I couldn't manage to fix.
The actual calendar size is small, so it is not being displayed well as to be seen below, Saturday and Sunday is missing for some reason. No CSS applied on it now, it came like that by default. Increasing width-height in CSS did not fix, only the white-background size changed when I did.
Also, then I press the month, it is seen like the picture below:
How can I fix it? Thanks for any ideas.
The code to create the calendar is here:
<table>
<tr>
<td>
<asp:Label ID="labelallowto" runat="server" Text="AllowedTo:"> </asp:Label>
</td>
<td>
<div>
<asp:TextBox ID="txtAllowedTo" runat="server" autocomplete="off"></asp:TextBox>
<cc1:CalendarExtender ID="Calendar1" BehaviorID="behaviorIDAllowFrom" FirstDayOfWeek="Monday" PopupButtonID="imgPopup" runat="server" TargetControlID="txtAllowedFrom" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
</div>
</td>
</tr></table>
Regards.
EDIT: when I increase width, it is seen like that for example:
Only background gets larger.
Adding a CssClass with those below fixed it:
ASPX:
<cc1:CalendarExtender ID="Calendar1" CssClass="cal_Theme" BehaviorID="behaviorIDAllowFrom" FirstDayOfWeek="Monday" PopupButtonID="imgPopup" runat="server" TargetControlID="txtAllowedFrom" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
CSS:
.cal_Theme .ajax__calendar_container th {
padding: 0px;}
.cal_Theme .ajax__calendar_container td {
padding: 0px;}
.cal_Theme .ajax__calendar_month {
padding-bottom: 3px;
margin-top: -3.5px}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Fixed GridView Header with horizontal and vertical scrolling in asp.net
I have a task to design to build a Scrollable Gridview with a fix header. I have tried developing it with a Div
<div id="DataDiv" style="overflow: auto; border: 1px solid olive;
width: 600px; height: 300px;" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
ShowHeader="false" RowStyle-VerticalAlign="Bottom">
<Columns>
<asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
<asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
<asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
</Columns>
</asp:GridView>
</div>
but it doesn't work as the header didn't get fix.
then i find one more code, as
<div style=" background-repeat: repeat-x; height: 30px;
width: 200px; margin: 0; padding: 0">
<table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
<tr>
<td style="width: 30px; text-align: center">
ID
</td>
<td style="width: 50px; text-align: center">
Dbms
</td>
<td style="width: 30px; text-align: center">
Version
</td>
</tr>
</table>
</div>
<div style ="height:100px; width:617px; overflow:auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
ShowHeader="false" RowStyle-VerticalAlign="Bottom">
<Columns>
<asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
<asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
<asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
</Columns>
</asp:GridView>
</div>
in this method, i am designing the header using pure html.
now the issue is, what is the best method to implement this requirement.
Aside from your problem there are few things that You should know about:
1) By design table cells will autoresize and match the content of the longest cell making the table readable. If You break this "rule" by making its header fixed You will have to take care about resizing header cell because header is no longer bound by the table rules.
2) Pure HTML/CSS solution will work ONLY if You set static lengths for all Your cells (both table and header). If content is to long to fit a cell and breaking lines is not possible (I sometimes work with german nouns so I know it's possible) everything will fall apart.
3) If You want a dynamic solution, You have to recalculate table cells with JS everytime content changes.
I guess it's pretty simply explained. If You need some examples please let me know and I will provide You with one.
Have fun!
I have done things like this a few times.
http://www.codeproject.com/Tips/471756/Fixed-Table-Header-atop-scrollable-GridView-in-ASP
The only tip I can give is stay away from vertical lines on the grid. It is tough to get the lines on the gridview and and the lines on the table to line up across browsers.
I am working with CheckBoxList, the checkbox lables are displayed in the next line if the value exceeds the div tag width.
Is there a way by which i can allign the same on the same line?
<table id="Table1">
<tr>
<td width="250px">
<asp:Label ID="deleteLabel" runat="server" Text="Select "></asp:Label>
</td>
<td width="900px">
<div style="border-style: solid; border-color: inherit; border-width: thin; overflow: auto;
width: 356px; height: 100px" class="ccodes" runat="server" id="deletePanel1">
<asp:CheckBox ID="CheckBoxSelectAll" runat="server" Text="All" />
<asp:CheckBoxList ID="checkBoxListDeleteEntities" runat="server" RepeatDirection="Vertical"
Height="26px">
</asp:CheckBoxList>
</div>
</td>
</tr>
</table>
Values are displayed as shown below. (for third value if it exceeds the width of the div (356px))
[] test1
[] test2
[]
test test test test test test test test test test test test test
Any suggestion how to make the checkbox label inline with the checkbox?
Have you tried white-space: nowrap?
.nowrap_list tr td label
{
white-space:nowrap;
overflow:hidden;
}
<asp:CheckBoxList ID="checkBoxListDeleteEntities"
CssClass="nowrap_list"
runat="server" RepeatDirection="Vertical"
Height="26px">
</asp:CheckBoxList>
In the following snippet of code, the width percentage attribute of the td tag seems to be ignored in Firefox/IE, etc. So both "Password" and the textbox get half the row, which is a waste of space. Is there something flagrantly wrong with the below snippet:
<table align="center" width="80%" cellpadding="0" cellspacing="0" class="loginBg">
<asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">
<tr>
<td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%">Username</td>
<td style="padding-right:0px;width:70%" align="left"><asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
</tr>
</asp:Panel>
</table>
Also, I'm doing styles in line because this is a very bare page that is only used to populate an iframe in another web application.
Thanks in advance for any tips.
EDIT: Added some code to clarify context.
EDIT 2: I removed the asp:Panel and the width proportioning seems to work now...but only when the iframe or browser window is 300+ pixels wide. In really small browser windows/frames, it forces both s to be 50%. Truly bizaree.
It seems that ie and table widths don't play nicely together.
What you can do to enforce a minimum width for your table is to add an extra row to your table which spans all columns which has a width of the minimum size that you desire. This will then enforce your td percentages when the broswer is resized or your iframe is small.
Like so:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
.min500
{
width: 500px;
height: 1px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table align="center" border="1" cellpadding="0" cellspacing="0" class="loginBg">
<asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">
<tr>
<td colspan="2">
<div class="min500"></div>
</td>
</tr>
<tr>
<td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%;">
Username
</td>
<td style="padding-right:0px;width:70%;" align="left">
<asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
</tr>
</asp:Panel>
</table>
</form>
For one thing, put your validator inside a <td>.
Secondly -- check for width settings in other rows' <td> styles -- you might have conflicts.
Does it happen if you take the textbox out?
Shouldn't the <asp:RequiredFieldValidator> be inside one of the <td>s?
edit: And the <asp:Panel> between the <table> and the <tr> probably isn't helping. That is, you shouldn't have extra controls/tags in your table that arent supposed to be there. Something like an <asp:Panel> should either wrap the whole table or be inside one of the <td>s.
edit: in short, the tags as arranged will generate invalid html and so all styling bets are off.
I was having big problems with this in ASP.NET. Using a colgroup tag in the table resulted in a page source back from IIS WITHOUT that group. As you may guess the table just did what it wanted at that point. After figuring out the problem may have been needing the runat='server' attribute on colgroup as it was on the parent table, I encountered a no compile situation. What finally worked for me was a typical kludge of putting the desired cell widths on the tags of the first row. PROBLEM: The first real row of the table had cells that spanned columns so a dummy row was required. Now, how to hide that?
Set the table to have fixed width and layout style:
style="width: 800px; table-layout: fixed"
Then use a first row something like this for the least amount of code that seems to work (use widths that add up to your table width):
<tr id="DummyTableRow" style="line-height: 0px" runat="server">
<td style="width: 200px; border: none"> </td>
<td style="width: 200px; border: none"> </td>
<td style="width: 400px; border: none"> </td>
</tr>
So others don't bother trying them, a list of failed attempts:
This won't work or any combination of trying to do it with the td tags:
<tr runat="server" style="display: none">
This won't work or any combination of trying to do it with the td tags:
<tr runat="server" visible="false">
This sort of worked, but left a blank row:
<tr runat="server" style="visibility: hidden">
I control visibility of buttons on a web page according to the type of a user.Visibility is determined in the Page_Load event. But there's one problem with the position of the controls.Appearance is awful.How can I make so that one button's top is the same as another button's top?
The markup is as follows: (added by OP in comment)
<tr>
<td style="width: 200px; height: 20px;">
<asp:Button ID="btnStajStatic" runat="server"
OnClick="btnStajStatic_Click" Text="Staj statistika"
Width="120px" BackColor="WhiteSmoke" BorderStyle="Solid" />
</td>
</tr>