Change control postion dynamically in ASP.NET - asp.net

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>

Related

How to increase the `DropDownHeight` of `RadComboBox` that contains `Templates`

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 !!

Dropdown Check List Pushing Div Downwards Instead of Overlapping

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.

HTML <td> tag's style attribute is not respecting the setting of width

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">

How to change the background color of AjaxControlToolkit HtmlEditorExtender control?

I'm using the HtmlEditorExtender control of the AJAX Control Toolkit and I want to change the editor's background color to another color.
How can I do that?
You just have to target the css class that the AJAXControlToolkit uses to style that element. In this case, it is the ajax__html_editor_extender_texteditor class. The following css would make the background of the HTML editor orange:
.ajax__html_editor_extender_texteditor
{
background-color:#FFA500;
}
If you put the control and extender into a table, you can set the background color in the tag like so:
<td style="background-color: white;">
<asp:TextBox ID="myTextBox" MaxLength="1000" Width="250px" Height="250px" TextMode="MultiLine" Rows="10" Wrap="true" runat="server" />
<ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="myTextBox" runat="server"/>
</td>
Put all inside this div. Works nicely!
div style="background-color: white; width: 100%;background-color:white;padding:0px 10px 6px 0px;"
You try to define a css and set it to the CssClass attribute of HtmlEditorExtender.
E.g
<style type="text/css">
.generalbox {
background-color:#F90
}
</style>
<cc2:Editor ID="txtDescription" CssClass="generalbox" runat="server" Height="300px" AutoFocus="true" Width="100%" />

Horizontal orientation in Repeater control

I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}

Resources