ASP.NET - Text Alignment - asp.net

I've got an alignment issue:
What I need is for the 'Delete Reasons' text to be vertically aligned, centered with the red 'X'. I tried using a div tag with CSS and style="verticalalign: middle;" but it forced 'Delete Reasons' to go underneath the 'X'.
How can I vertically center the text? Any help is greatly appreciated!
PS - Here's the code:
<tr>
<td class="style7" valign="middle">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="ibClearReasons" runat="server" Height="30px" Width="30px" ImageUrl="~/Images/DeleteRed.png" AlternateText="Delete" />Delete Reasons
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td class="style6">
<asp:LinkButton ID="SendToBatch" runat="server" BackColor="#20548E" BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small" Font-Underline="False"
ForeColor="White" Height="16px" Width="85px" EnableViewState="True" CausesValidation="False"><center>Send To Batch</center></asp:LinkButton>    
</td>
</tr>
EDIT: CSS Style 7:
.style7
{
text-align: left;
vertical-align: middle;
}

You have to set the vertical-align attribute on the element: http://jsfiddle.net/rkw79/Zs5AH/
There is a good chance that it will still look off if the img height is small. For issues like that, you would need to wrap 'delete reasons' inside a <span> tag and give it a padding-top attribute.

Try this...
<td class="style7" valign="middle">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left;margin:0px 4px;width:30px;">
<asp:ImageButton ID="ibClearReasons"
runat="server"
Height="30px"
Width="30px"
ImageUrl="~/Images/DeleteRed.png"
AlternateText="Delete" />
</div>
<div style="float:left;height:30px;padding:6px 0px;width:100px;">
Delete Reasons
</div>
<div style="clear:both"></div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
You may have to play with the padding and/or width on the second div to get it to be just right. If this works, you can simply move the inline styles to a css file with class names (div.className) HTH

Related

How do I get a toggle button and text to stack vertically so that their centres align?

I have the following code to create a "favourites" button:
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="24"
ImageHeight="24"
UncheckedImageUrl="~/ClientBin/images/icons24x24/openstar.png"
CheckedImageUrl="~/ClientBin/images/icons24x24/filledstar.png"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"></asp:ToggleButtonExtender>
<br />
<asp:Label runat="server"
Text="Favourite"
font-size="8"
font-name="Verdana"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Which gives me the following layout on the page:
What I would like is for the elements to be aligned something like this:
with the star's and text's centre's aligned.
I feel I'm missing something obvious, but I can't find the right search terms to reveal the answer.
This may not be ideal, but you can place the Checkbox and ToggleButtonExtender in a table of a certain size, and then nudge the image to the right using cell padding:
<div style="margin-left: 1in; margin-top: 1in; width: 24px; text-align: center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="width: 75px">
<tr>
<td style="padding-left: 12px">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="24"
ImageHeight="24"
UncheckedImageUrl="star_24x24.bmp"
CheckedImageUrl="star_24x24.bmp"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck">
</asp:ToggleButtonExtender>
</td>
</tr>
</table>
<asp:Label runat="server"
Text="Favourite"
Font-Size="8"
font-name="Verdana"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

overflow:hidden makes data disappear in IE

I'm having a problem with IE. The page works fine in all browsers like shown below.
but in IE the data doesn't show up even though its there.
The problem is caused by the overflow:hidden attribute I use on the item template of the ListView. When I change it to any other value the data shows up in IE but of course the layout gets messed up in all browsers.
Here is the source code and the CSS http://jsfiddle.net/V5aCa/8/
And here is my code:
<asp:ListView ID="BookListView" runat="server" DataSourceID="SqlDataSource1"
onselectedindexchanged="BookListView_SelectedIndexChanged">
<LayoutTemplate>
<table runat="server" cellpadding="1" id="tblBooks" style="">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<div style="overflow:hidden">
<div class="itemTemplateleftColumn">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120px" Width="90px" BorderColor="Gray" BorderWidth="1px"/>
</div>
<div class="itemTemplaterightColumn">
<div class="titleRow">
<asp:Label runat="server" ID="BookTitleLabel" Text='<%# Eval("Title") %>' />
</div>
<div class="nameRow">
<asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
<asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
</div>
<div class="values">
<div>
value1
</div>
<div>
value2
</div>
</div>
<div class="values">
<div>
value3
</div>
<div>
<asp:Label runat="server" ID="PriceLabel" Text='<%# Eval("Price") %>' />&#8364
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</asp:Content>
I would appreciate any help on solving this issue. Thanks in advance.
Apply minimum Height and Width for that div in Gridview and then apply overflow
min-height: 110px;min-width: 150px;
Try this hope it will help!
[Updated] First, apply a css class or id to avoid inline styling.
Then, try to write overflow:hidden !important to prevent IE from applying that rule, this should do the trick!
.your-div-class{
overflow:visible; /* This is default value, but reset it anyway */
overflow:hidden !important;
}

Ajax ModalPopupExtender - Set scrollbars if the browser is too small [duplicate]

I display a gridview in a ModalPopupExtender.
When the screen resolution is to small, the pop-up is to big to all be displayed on the page.
I just want to add scroll bar to the pop-up when this happen.
I know it's probably some CSS, but all I tried did not work.
here some base css
.modalTextBoxBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalTextBox
{
border: 1px solid #FFFFFF;
background-color: #0066CC;
color: #00FFFF;
}
here some code from the aspx
<asp:Panel ID="OptionSelectionPanel" runat="server" CssClass="modalTextBox">
<asp:UpdatePanel ID="OptionSelectionUpdatePanel" runat="server" UpdateMode="Conditional" >
<Triggers>
<asp:asyncPostBackTrigger ControlID="TemplateSelection" />
</Triggers>
<ContentTemplate>
<table class="EditRow">
<tr class="HeaderFooter">
<td colspan="3" class="modalTextBoxTitle">
Add options to Quote
</td>
</tr>
<tr>
<td>
Manufacturer
</td>
<td>
<asp:DropDownList ID="OptionManufacturerFilter" runat="server"
DataSourceID="OptionManufacturerDataSource" DataTextField="Name"
DataValueField="Code" AutoPostBack="True" >
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<asp:GridView ID="NewOptionSelection"
runat="server"
DataSourceID="AvailableOptions"
DataKeyNames="Option_Id"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="category_Descr" HeaderText="Category" SortExpression="category_Descr,subcategory_Descr,code" />
<asp:BoundField DataField="subcategory_Descr" HeaderText="Sub-Category" SortExpression="subcategory_Descr,code" />
<asp:BoundField DataField="Manuf_Name" HeaderText="Manufacturer" SortExpression="Manuf_Name"/>
</Columns></asp:GridView>
</td>
</tr>
<tr class="HeaderFooter">
<td colspan="3" class="Center">
<asp:Button ID="OptionSelectionClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="HiddenTargetControlForOptionSelectionModalPopup" style="display:none"/>
<cc1:ModalPopupExtender ID="OptionSelectionModalPopupExtender" runat="server"
TargetControlID="HiddenTargetControlForOptionSelectionModalPopup"
PopupControlID="OptionSelectionPanel"
BackgroundCssClass="modalTextBoxBackground" />
I just found this.
ModalPopupExtender does not show scroll bar
it was still not working, but it was because I use a masterpage, so I solved this using the ClientID.
(note: to center that inner asp:panel vertically, the only thing I found was to put it into a Table cell using style="vertical-align:middle".
I also need set OptionSelectionTable's height using JavaScript because height="100%" fail with some browser.)
<script type="text/javascript">
function pageLoad() {
$get('<%= OptionSelectionPanel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
$get('<%= OptionSelectionTable.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
</script>
I also had to add the HorizontalAlign="Center" and ScrollBars="Auto" and to the Panel ID="OptionSelectionPanel" (the modalpopup's PopupControlID).
I moved the CssClass="modalTextBox" to an inner asp:panel and restored the HorizontalAlign="Left".
<asp:Panel ID="OptionSelectionPanel" runat="server"
HorizontalAlign="Center" ScrollBars="auto">
<asp:UpdatePanel ID="OptionSelectionUpdatePanel"
runat="server"
UpdateMode="Conditional" >
<Triggers>
<asp:asyncPostBackTrigger ControlID="TemplateSelection" />
</Triggers>
<ContentTemplate>
<table ID="OptionSelectionTable"
runat="server"
border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td style="vertical-align:middle">
<asp:Panel ID="OptionSelectionInnerPanel"
runat="server"
HorizontalAlign="Left"
CssClass="modalTextBox">
<table class="EditRow">
......
</table>
</asp:Panel>
</td></tr></table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Try wrapping the entire outer table element in a div and set the div's height to the height of your dialog and then set the new div's css overflow-y property to scroll.
[Edit - jQuery solution]
Have a look at jQuery height http://api.jquery.com/height/ . Basically you would select the parent element and update it's css properties at runtime, with something sorta like this below (untested). Keep in mind this is not an ideal solution and is sure to calculate somewhat differently between browsers.
$(document).ready(function() {
var parentDiv = $("#yourParentDiv");
parentDiv.css("height", parentDiv.height());
parentDiv.css("overflow-y", "scroll");
});

NumericUpDownExtender buttons same height as the textbox

I'm using the NumericUpDownExtender control, but my buttons on the side of the textbox are bigger then my textbox, is there a way to make the buttons the same height as my textbox?
Edit: I found my problem. I was using the standard buttons, which can't be handled?. Now I've created custom ones, but they won't appear on each other, but next to each other.
my code:
<asp:TextBox ID="txtHerst" runat="server" Text="0" Style="text-align: center"></asp:TextBox><cc1:NumericUpDownExtender ID="extHerst" runat="server" TargetControlID="txtHerst"
Width="50" Enabled="True" Maximum="1.7976931348623157E+308" Minimum="-1.7976931348623157E+308"
RefValues="" ServiceDownMethod="" ServiceDownPath="" ServiceUpMethod="" Tag=""
TargetButtonDownID="imgBtnDown" TargetButtonUpID="imgBtnUp"></cc1:NumericUpDownExtender><asp:ImageButton ID="imgBtnUp" runat="server" ImageUrl="Images/up.jpg" /><asp:ImageButton ID="imgBtnDown" runat="server" ImageUrl="Images/down.jpg" />`
You should be able to use css to do that...
I encountered the same problem, and eventually replaced the extender to RangeValidator.
first all of you should create some Css.
<style type="text/css">
.auto-style1 {
width: 78px;
}
.auto-style2 {
height: 5px;
width: 19%;
}
</style>
So, in my case I've created a table and set the columns with the controllers and buttons that need it, works for me
<table border="1">
<tr >
<td class="auto-style1" ><asp:TextBox ID="TextBox1" runat="server" Width="100%" Text='<%# Bind("Secuencia") %>' Height="18px"></asp:TextBox></tdstyle="width=70%> </td>
<td class="auto-style2" >
<asp:ImageButton ID="up" runat="server" style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/up.gif" Width="10px" />
<asp:ImageButton ID="down" runat="server" style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/down.gif" Width="10px" />
</td>
</tr>
</table>
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" Width="20" runat="server"
TargetButtonUpID="up" TargetButtonDownID="down" TargetControlID="TextBox1" />

asp.net ModalPopupExtender : need to show scroll bar when overflow

I display a gridview in a ModalPopupExtender.
When the screen resolution is to small, the pop-up is to big to all be displayed on the page.
I just want to add scroll bar to the pop-up when this happen.
I know it's probably some CSS, but all I tried did not work.
here some base css
.modalTextBoxBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalTextBox
{
border: 1px solid #FFFFFF;
background-color: #0066CC;
color: #00FFFF;
}
here some code from the aspx
<asp:Panel ID="OptionSelectionPanel" runat="server" CssClass="modalTextBox">
<asp:UpdatePanel ID="OptionSelectionUpdatePanel" runat="server" UpdateMode="Conditional" >
<Triggers>
<asp:asyncPostBackTrigger ControlID="TemplateSelection" />
</Triggers>
<ContentTemplate>
<table class="EditRow">
<tr class="HeaderFooter">
<td colspan="3" class="modalTextBoxTitle">
Add options to Quote
</td>
</tr>
<tr>
<td>
Manufacturer
</td>
<td>
<asp:DropDownList ID="OptionManufacturerFilter" runat="server"
DataSourceID="OptionManufacturerDataSource" DataTextField="Name"
DataValueField="Code" AutoPostBack="True" >
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<asp:GridView ID="NewOptionSelection"
runat="server"
DataSourceID="AvailableOptions"
DataKeyNames="Option_Id"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="category_Descr" HeaderText="Category" SortExpression="category_Descr,subcategory_Descr,code" />
<asp:BoundField DataField="subcategory_Descr" HeaderText="Sub-Category" SortExpression="subcategory_Descr,code" />
<asp:BoundField DataField="Manuf_Name" HeaderText="Manufacturer" SortExpression="Manuf_Name"/>
</Columns></asp:GridView>
</td>
</tr>
<tr class="HeaderFooter">
<td colspan="3" class="Center">
<asp:Button ID="OptionSelectionClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="HiddenTargetControlForOptionSelectionModalPopup" style="display:none"/>
<cc1:ModalPopupExtender ID="OptionSelectionModalPopupExtender" runat="server"
TargetControlID="HiddenTargetControlForOptionSelectionModalPopup"
PopupControlID="OptionSelectionPanel"
BackgroundCssClass="modalTextBoxBackground" />
I just found this.
ModalPopupExtender does not show scroll bar
it was still not working, but it was because I use a masterpage, so I solved this using the ClientID.
(note: to center that inner asp:panel vertically, the only thing I found was to put it into a Table cell using style="vertical-align:middle".
I also need set OptionSelectionTable's height using JavaScript because height="100%" fail with some browser.)
<script type="text/javascript">
function pageLoad() {
$get('<%= OptionSelectionPanel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
$get('<%= OptionSelectionTable.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
</script>
I also had to add the HorizontalAlign="Center" and ScrollBars="Auto" and to the Panel ID="OptionSelectionPanel" (the modalpopup's PopupControlID).
I moved the CssClass="modalTextBox" to an inner asp:panel and restored the HorizontalAlign="Left".
<asp:Panel ID="OptionSelectionPanel" runat="server"
HorizontalAlign="Center" ScrollBars="auto">
<asp:UpdatePanel ID="OptionSelectionUpdatePanel"
runat="server"
UpdateMode="Conditional" >
<Triggers>
<asp:asyncPostBackTrigger ControlID="TemplateSelection" />
</Triggers>
<ContentTemplate>
<table ID="OptionSelectionTable"
runat="server"
border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td style="vertical-align:middle">
<asp:Panel ID="OptionSelectionInnerPanel"
runat="server"
HorizontalAlign="Left"
CssClass="modalTextBox">
<table class="EditRow">
......
</table>
</asp:Panel>
</td></tr></table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Try wrapping the entire outer table element in a div and set the div's height to the height of your dialog and then set the new div's css overflow-y property to scroll.
[Edit - jQuery solution]
Have a look at jQuery height http://api.jquery.com/height/ . Basically you would select the parent element and update it's css properties at runtime, with something sorta like this below (untested). Keep in mind this is not an ideal solution and is sure to calculate somewhat differently between browsers.
$(document).ready(function() {
var parentDiv = $("#yourParentDiv");
parentDiv.css("height", parentDiv.height());
parentDiv.css("overflow-y", "scroll");
});

Resources