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

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");
});

Related

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");
});

ASP.NET - Text Alignment

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

Why all contents are aligned left within a content template in an update panel?

If I write dummy text in the 2 labels before the update timer starts, one appears at the right and the other appears at the left as expected
However, when the updateTimer gets into picture both texts appear on the left stuck to each other
here's the code
<table width="100%" border="0" cellspacing="7" cellpadding="0">
<tr>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer runat="server" ID="UpdateTimer" Interval="5000" OnTick="UpdateTimer_Tick" />
<asp:UpdatePanel runat="server" ID="TimedPanel" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateTimer" EventName="Tick" />
</Triggers>
<ContentTemplate>
<td align="left">
<asp:Label ID="userNameLabel" runat="server"></asp:Label>
</td>
<td align="right">
<asp:LinkButton ID="userWebsiteLabel" runat="server"></asp:LinkButton>
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
</table>
The TimedPanel is rendering as a span, like this:
<span id="TimedPanel">
<span id="userNameLabel">label</span>
<a id="userWebsiteLabel" href="javascript:__doPostBack('userWebsiteLabel','')">linkbutton</a>
</span>
Change your ContentTemplate to:
<ContentTemplate>
<asp:Label ID="userNameLabel" runat="server" Text="label" />
<asp:LinkButton ID="userWebsiteLabel" runat="server" Text="linkbutton" />
</ContentTemplate>
And add some CSS to align the LinkButton to the right:
<style type="text/css">
#TimedPanel a {float: right;}
</style>

Couldn't find updatepanel inside hidden div

I have an Updatepanel inside hidden Div, but I am getting "Could not find UpdatePanel with ID 'ctl00_ContentPlaceHolder_ctl04_UpdatePanel1'. I am trying to show and hide this panel from code behind. Thanks for any help. Here is my code.
<div id="div1" runat="server" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
you can only manipulate the the code inside the ContentTemplate from the updatepanel's postbacks, so the "div1"s display property can't be changed by the updatepanel's postbacks.
you could move the div inside the updatepanel and then it should work
I'd try this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" id="div1" runat="server" style="display:none">
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
<asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the client id of div1 will no longer be div1 (unless your using .net 4 in which case you can specify that it is'div1') you can fix this a variety of ways but basically you just need to add a little bit of javascript to the page that associates the actual WebControl.ClientID with 'div1'.

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

Resources