I have a RadComboBox as below :-
<telerik:RadComboBox ID="RadComboBoxNames" runat="server" Width="470px" DropDownAutoWidth="Enabled" MaxHeight="363px" Skin="MySkin" EmptyMessage="Select"
HighlightTemplatedItems="True" DataValueField="ID" DataTextField="ID" OnDataBound="RadComboBoxNames_DataBound" >
<HeaderTemplate>
<table style="width: 250px; text-align: left">
<tr>
<td style="font-weight: bold; width: 60px;">ID</td>
<td style="font-weight: bold; width: 180px;">Name</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 250px; text-align: left">
<tr>
<td style="width: 60px;"><%#DataBinder.Eval(Container.DataItem, "ID")%></td>
<td style="width: 180px;"><%#DataBinder.Eval(Container.DataItem, "Name")%></td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
Now my DropDown height is not 363px as I have set in the MaxHeight property, it is very small and not increasing my dropdown height even if I Increase the value in MaxHeight property !!
How to increase my DropDownHeight of my RadComboBox ? Do I have to use any styling techniques ? Please Help, ThankYou.
You can alternatively change the MaxWidth of the RadComboBox drop down area by editing the default theme of RadComboBox. To do that, follow these steps:
Open your project in Blend and with RadComboBox selected go to Object-> Edit Template -> Edit a Copy
Search for a Control Template with an x:Key="NonEditableComboBox"
Inside, find Popup x:Name="PART_Popup"
Add a MaxWidth property that equals a value which you see fit to your needs.
Hope it would help.
Just keep the Height property of the RadComboBox !!
Related
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.
I want the table with borders to show inside the list view.I used html table inside list view,but I cant get the border lines(rows and columns)(tried border="2").I tried to get the border using css also,but I cant get the table lines.
code:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<table id="Table1" border="2" runat="server" class="TableCSS">
<tr id="Tr1" runat="server" class="TableHeader">
<td id="Td1" runat="server">OwnedBy </td>
<td id="Td2" runat="server">Sharedclass </td>
<td id="Td3" runat="server">EffectiveInterest </td>
<td id="Td4" runat="server">DeemedInterest </td>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<asp:listview>
css:
.TableCSS
{
border-bottom-width:thin;
border-left-width:thin;
border-bottom-color:Black;
background-color:Red;
width:auto;
}
.TableHeader
{
border:12px;
background-color:black;
color:Snow;
font-size:11px;
font-family:Verdana;
height:auto;
text-align:center;
}
To see the table lines, set background for the table and give cellspacing="1"(Add cellspacing attribute to your Table tag) and apply the background color for all TD tags inside table.
Notice that the class you gave the table is not the same as what you declared in your css (i.e. class="Table" VS .TableCSS)
Also, you can declare a header for each column with <th>.
Use Gridlines. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.table.gridlines.aspx
Inside <td> hard code the styling as:
style="border: thin solid #C0C0C0". Change the border color as you want.
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>
Like happens to all of us sometimes, I inherited some crappy code I have to fix.
We need to center our pages on widescreen machines, so we have a master page layout div like so:
.MasterLayout
{
width:1100px;
height: 100%;
position:absolute;
left:50%;
margin-left:-550px;
vertical-align:top;
}
I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out:
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 100%" align="center" colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; background-color: #333;">
<asp:SiteMapPath/>
</td>
</tr>
<tr>
<td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top">
<asp:Menu />
<asp:SiteMapDataSource />
</td>
<td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>
</td>
</tr>
</table>
When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE
Try centering the .MasterLayout using margin: 0px auto instead of the negative margin method.
While you're updating the code, you might also consider using divs instead of tables for page layout.
Put contentPlaceholder in a div and control the overflow with css overflow property of that div. I suggest you to use width of main block like #masterlayout, #sidebar in %.