NumericUpDownExtender buttons same height as the textbox - asp.net

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

Related

how to use update panel with model extender popup

I have a link on update panel,when i clicked on Cure Loan,model extender pop up should come up but instead of one popup all the popup on the page is come up
so please give me the solution how to use update panel with model extender pop up
here is my code
<asp:UpdatePanel ID="UPCureLoan" runat="server">
<ContentTemplate>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click" />
</Triggers>
Panel->
<table style="width: 100%; background-color: #DDE2E5;">
<tr style="background-color: #522E8B; color: white; height: 50px">
<td colspan="4" style="text-align: center; font-size: medium"><b>Notification</b></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3" style="font-size: medium;"> I confirm that I have discussed the borrowers concerns with the borrower.<br />
Please enter your initials to confirm
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td colspan="3" style="text-align: center">
<asp:CheckBox ID="CheckBox4" runat="server" Style="transform: scale(2) !important;" Height="20px" Width="20px" /><b> Resend Borrower Survey 1 </b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr style="text-align: center">
<td> </td>
<td>
<td>
<asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
<asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<%-- <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>
Model extender Popup->
ID="Modalpopupextender5" runat="server"
PopupControlID="Panel5" TargetControlID="hidForModel"
BackgroundCssClass="gridView" OkControlID="ButtonSave">
</cc1:ModalPopupExtender>
You are not using the UpdatePanel control properly.
All you're doing there is placing some HTML code (which is incorrect) inside the ContentTemplate.
<ContentTemplate>
<%-- Where is your <table> etc? --%>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
You also have your other code outside of the UpdatePanel.
All your code that has to be controlled by the Panel and the modalpopup, must be inside the UpdatePanel. BUT your ModalPopupExtender itself can be outside the UpdatePanel. In fact, it should if you're treating the UpdatePanel as a "popup box".
This is how I use UpdatePanels with AJAX:
Firstly set up your styles for the background, the panels and the popup itself.
<style type="text/css">
.pnlCIR
{
position: absolute; top: 20%; left: 22%; width: 400px; border: 3px solid LightSlateGray;
background-color: #E0E8F0; padding: 3px; font-family: Arial; font-size: small;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
position:fixed;
overflow:hidden;
}
</style>
Next define your AJAX popup:
<asp:Button ID="btnCIR" runat="server" Text="Suggest Improvement (CIR)" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeCIR" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upCIR"
TargetControlID="btnCIR">
</ajaxToolkit:ModalPopupExtender>
Next define your UpdatePanel as a "wrapper" around your code that you want to be inside the panel (in my case the "CIR" panel)
<asp:UpdatePanel ID="upCIR" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCIR" runat="server" CssClass="pnlCIR" Width="700px">
<your code>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Note:
You must use UpdateMode conditional
You must have a Panel inside the UpdatePanel, so that the Panel is the actual popup, and the UpdatePanel is the control that keeps postbacks inside the UpdatePanel, avoiding the dread "postback flash" on your entire screen.

how to remove space under a table?

Here what I've done and whats my problem. First of all i got a big table with a lot of td the first td on top of my table containt anoter table and (here come my problem) theres a space under that little table and I don't know why.
Here's the code for my table:
<div runat="server" class="ReportPage" >
<table runat="server" class="ListReportBigTable" align="center">
<tr>
<td class="style13" colspan="3" >
<table width="46%" align="center"style="height:50%; "cellpadding="0">
<tr>
<td align="left">
<asp:Label ID="LB_ChooseReport" runat="server"
Text="Choisissez un dossier médical: " Font-Size="Small">
</asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align:bottom" align="left">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div id="div_Filter" runat="server" visible="false" align="left">
<asp:Label ID="LBL_FilteredBy" runat="server" width="18%" Text="Patient : "
Font-Size="Small" style="margin-left: 0px"></asp:Label>
<asp:DropDownList ID="DDL_FilterSelect" runat="server" AutoPostBack="true"
Width="25%" CssClass="DDL_Filter" Font-Size="Small" Height="18px"></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel></td></tr></table>
<br />
</td>
and here the CSS:
.ListReportBigTable
{
height:25%;
width:55%;
text-align:center;
vertical-align:middle;
border: thick solid black;
margin-left: 0px;
}
thx in advance
I don't know if it's a typo but you are closing with a </td> after your closing </table> tag. In addition you have a <br /> before the closing misplaced </td> which would obviously add space to the bottom.
Try changing the closing </td> to </table></div> and removing the <br />
In addition, in your CSS try adding margin-bottom: 0px; and padding-bottom: 0px; to see if this has an effect.
Also, what is after the table? Maybe whatever is being displayed after the table has it's own top margin/padding?
Do you have a link to the actual page where this is occuring so we can examine with Firebug or similar and try to figure it out?

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

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