This is the code and css i have checked several links and followed accordingly but i still get the problem. Kindly explain.
<asp:Button ID="Button1" runat="server" BackColor="#93C323"
Font-Names="Segoe UI Light" Font-Size="X-Large" ForeColor="White" Height="41px"
style="margin-left: 144px" Text="+ Add" Width="121px" />
.button:hover
{
background:#DBDBDB;
}
Avoid to make the style inline when you like to change it by hover, or dynamically. This is an example that I just tested and is working:
<asp:Button ID="Button1" runat="server" CssClass="OneButton" Text="ok" />
<style type="text/css">
.OneButton
{
background-color:#93C323;
font-size:x-large;
color:White;
height:41px;
width:121px;
margin-left:144px;
}
.OneButton:hover
{
background-color:#DBDBDB;
}
</style>
And a live version of it: http://jsfiddle.net/gwSWy/
You need to add cssclass="button" to your button.
<asp:Button ID="Button1" runat="server" BackColor="#93C323" CssClass="button"
Font-Names="Segoe UI Light" Font-Size="X-Large" ForeColor="White" Height="41px"
style="margin-left: 144px" Text="+ Add" Width="121px" />
If you're looking to do this globally for all buttons:
The ASP.NET button creates <input type="submit">.
So you'll need to style around that.
If you just need that style with your button, you can use the Button Property CssClass. Check this link for your reference.
and one thing more, I guess you're not using style properly. you can just put your margin details in the button css then remove the attribute style.
Your CSS rule will not find the element in the DOM because there is no CSS class assigned to it the way you are doing it.
You can do as nimeshjm mentioned and add the CssClass="button" attribute to the button control - this should match your CSS rule assuming you don't have any other problems (stylesheet is linked to on the page, no over-riding/more specific rules.
You also won't be able to style the element based on its ID because it will be automatically changed when the page is rendered to prevent ID collisions between elements.
If you use the attribute ClientIDMode="Static" which will keep the ID as you specified in the control.
As Joe Enos stated, the Button control is rendered as an <input type-"submit" /> so you also can't use an CSS rule like button:hover { background: black; }
Related
I am trying to change the text of ASPxPopupControl buttons (I have not written the ASPxPopupControl code myself. Those guys are long gone. :) So it's up to me). As far as I know, the ASPxPopupControl default buttons are used and if I want to change the button text I have to add code to the .aspx file. I have tried searching for an answer on the DevExpress docs and the world wide web. But could not find anything that matches my needs. I am very grateful for any ideas.
This is the buttons I am talking about:
The ASPxPopupControl code (There is an attempt to add a custom button but it does not work.):
<dxpc:ASPxPopupControl ID="someLongID" runat="server"
AllowDragging="True" ClientInstanceName="someLongID"
CloseAction="CloseButton" HeaderText="Varning!" Modal="True"
PopupHorizontalAlign="WindowCenter"
Width="300px">
<ContentCollection>
<dxpc:PopupControlContentControl ID="PopupControlContentControl3"
runat="server" Enabled="True">
<p>
<br />
</p>
<p align="right">
<input
id="Button1"
onclick="javascript:someLongID.Hide();"
type="button" value="Stäng" />
</p>
</dxpc:PopupControlContentControl>
</ContentCollection>
<HeaderStyle BackColor="#FFB6C1" />
</dxpc:ASPxPopupControl>
If you don't implement you own popup edit form, but use the built-in one, it is necessary to access the required text setting via the ASPxGridView.SettingsText (CommandUpdate, etc.).
I think you can change the text content in the item property (in "Properties") which is located in the right down corner on VS.
you can click on the item in "Design" mode and then check its setting in "Properties"
Hope this helps
I've got a page that contains a huge amount of controls, (gridviews, reportviewers, buttons etc.)
Now I've a couple of textboxes and dropdowns that represent a "form" user might want to fill up and submit by clicking a button. Some of these controls contain "RequiredFieldValidator"s.
<fieldset runat="server" >
<asp:Label ID="lblName" runat="server" Text="Name:" AssociatedControlID="txtName" />
<asp:RequiredFieldValidator ID="rfvTxtName" runat="server" ControlToValidate="txtName" Text="(Required)" />
<asp:TextBox ID="txtName" Width="175px" runat="server" />
....
....
</fieldset>
The problem I encounter is that no other button on the entire asp form can be clicked because of these validation controls.
The question is; how do I set this validation to only listen to that particular fieldset and not the whole page?
Set the ValidationGroup property of those controls to something unique.
More info here.
Set your controll's ValidationGroup property to make them one group . Like
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button"
ValidationGroup="MyGroup" />
The ValidationGroup property specifies which group of controls is
validated on validation. This property is mostly used when there are
several buttons in a form.
ASP.NET ValidationGroup Property
You ca also change property CausesValidation to False for control that you don't want to validate.
I was trying to display lblName1 and lblName2 only if they have text. Even when i dont have any value for lblName2, the break still has an impact. Can someone please advice me if there is any other way to display or conditionally display
<asp:Label ID="lblName1" runat="server" Visible= "false" ></asp:Label> <br />
<asp:Label ID="lblName2" runat="server" Visible= "false"> </asp:Label>
Thanks in advance..
Give the label a CSS class name and set the margin for that class:
<asp:Label ID="lblName1" CssClass="Testing123" runat="server" Visible= "false" ></asp:Label> <br />
.Testing123{ margin-bottom: 20px; }
If the Label is not rendered then no gap will be created.
You might consider adding a litteral to handle the br and this way play with its visibilty :
<asp:Literal runat=server Id=C_lit_Br><br /></asp:Literal>
with in your codebehind :
if (!lblName2.Visible)
C_lit_Br.Visible=false;
It is a quick patch, but it should work.
It is better to use literal in that case:
In literal text you also write html in it
wrap the labels in p tags:
<p><label1></p>
<p><label2></p>
Going with what you have and ignoring using any code behind changes, you can use some css to provide a break without using a <br /> tag.
By this, I mean if you were to give your <label> controls a css class, class="labelStyle
.labelStyle{
float: left;
clear: left;
}
Your html produced would look like
<span class="labelStyle">Some Text</span><span class="labelStyle">More Text</span>
If there is no value in the Labels, then your html would contain two empty span tags.
This will move the 2nd label onto the next line. However this may not fit in with the rest of your html, and because you are floating elements, then your overall layout might break.
An example is here http://jsfiddle.net/2v93f/
I am using ASP.NET 3.5 and C#.
On my page I need to have a Text box that must not be visible to the user but it MUST be there when you look at the Page Source, reason being, another program called Eloqua will be looking at the page source and it must get the value of that text box.
The value of that text box will be populated based on what the user selects.
Thus, I cant set the text box property to Visible = False because then it will not be in the source HTML and I can't set the Enabled = False because I do not want the user to see the text box.
Is there some property I can use to make this text box hidden to the user but still visible in the page source?
My ASP.NET text box
<asp:TextBox ID="txtTester" runat="server"></asp:TextBox>
You can use a hidden field.
<asp:HiddenField id="myHiddenInput" runat="server" />
Use it just like a textbox.
Try this to invisible textbox instead of server side Visible property :
myTextBox.Style.Add("visibility", "hidden");
// or :
myTextBox.Style.Add("display", "none");
First thought: Can you use a hidden field? This would be much more suitable (<asp:hiddenfield ID="blah" runat="Server" /> if you want a .NET control).
If the app won't take that though you can actually just put "style='display: none;'" in the code-infront of the page. Intellisense won't like it, but it'll render just fine (EG: <asp:TextBox id="txtField" style="display: none;" runat="server" />)
Also from the codebehind you can do txtField.Attributes.Add("style", "display: none");
Or you could also just give it a CssClass "hidden" which in your CSS is defined as ".hidden { display: none;}"
The CSS class or just using a hidden field would be my recommendations.
Page.RegisterHiddenField or asp:HiddenField
CSS:
.hidden-div
{
display: none;
}
HTML:
<div class="hidden-div">
<input ... />
</div>
It will cause your input to be hidden, but it's gonna be visible in source code.
EDIT: Sorry, I misread it. I thought you wanted to hide an input. But it doesn't matter anyway, just replace input with basically anything.
If it must be a textbox for whatever reason just hide it with css:
<input type="text" name="blah" style="display:none" />
By Setting Visible = "false" in server side will not render the control. You should either use asp:Hidden or INPUT type="hidden". Other option is using CSS, by setting display:none.
Why not use a hidden field:
<input type="hidden" name="blah" />
How about using CSS to hide a div containing the text box:
.hidden {
position: absolute;
left: -9999px;
}
Then within your page:
<div class="hidden">
<asp:TextBox ID="TextBox1" runat="server" Text="hi"></asp:TextBox>
</div>
Hope this helps.
Simply, Try to create a CSS class and attach it to your TextBox as the following:
CSS Class Style
<style>
.Hide {
display:none;
}
</style>
Textbox using CssClass="Hide"
<asp:TextBox ID="txtTester" runat="server" CssClass="Hide"></asp:TextBox>
Note: you can't use validation with the Hidden control
<asp:TextBox ID="TextBox2" runat="server" visible="false"></asp:TextBox>
I am trying to bypass the ConfirmButtonExtender depending on the value of another field in the page.
Basically, when a user click on my "Cancel" button, I normally display a modalpopup using the confirmbuttonextender and the modalpopupextender to display a dialog box confirming that they wish to cancel any changes they have made and return to the prior screen. If they click Yes, the button's onclick event fires which calls some code in the codebehind and redirects the user to another page. If they click no, it just returns to the same page, with no changes.
However, in some situations, I know that my user is unable to perform any edits (they aren't allowed to) and for those users, I don't want to display the "Are you sure you want to leave you will loose any changes" dialog box.
I've set a hidden checkbox field named "cbAllowEdit" to indicate whether the user is allowed to edit the fields or not.
I was trying to use the technique found at link text to get this working but it just doesn't even seem to be firing the button's onclientclick event at all.
Here is my code.
ASPX & Javascript
<asp:CheckBox ID="cbAllowEdit" runat="server" Checked="true" />
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="btnCancel" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="btnCancel" />
<asp:Panel ID="ConfirmCancelPanel" runat="server" CssClass="modalWindow"
Height="200" Width="450">
<p class="confirmMessage">
Are you sure you want to navigate away from this record?
</p>
<div align="center">
<p class="feedbackError">If you have made any changes to the record since the last time
you saved, they will be lost.</p>
<asp:Button ID="btnConfirmCancel" runat="server" Text="Yes" Width="75" />
<asp:Button ID="btnCancelCancel" runat="server" Text="No" Width="75" />
</div>
</asp:Panel>
<script type="text/javascript">
function disableSubmit() {
if (document.getElementById('<%= cbAllowEdit.ClientID %>').checked) {
return checkSubmit();
}
else {
return true;
}
}
function checkSubmit() {
var confirmButton = $find('ConfirmButtonExtenderbtnCancel');
confirmButton._displayConfirmDialog();
}
</script>
Code behind:
/// <summary>
/// Runs when the btnCancel button is clicked.
/// </summary>
protected void btnCancel_Click(object sender, EventArgs e)
{
Page.Response.Redirect("~/Searches/LookupCode/Default.aspx");
}
any ideas on what I am doing wrong?
As Chris said, you don't have to have a ConfirmButtonExtender and ModalPopupExtender (although this looks like a way round the fact that the JavaScript confirm() function is limited to OK and Cancel buttons in its' dialog - noted as a technique for the future :-) )
If you know in your code-behind that the user isn't going to be doing any editing (as evidenced by your cbAllowEdit control), then you should be able to just disable the ConfirmButtonExtender:
ConfirmButtonExtenderbtnCancel.Enabled = false;
Then clicking the Cancel button should take you into your code-behind function without confirmation at all.
EDIT: The ConfirmPopupExtender shouldn't be pointing to the btnCancel. Instead, it should be pointing to a hidden button (this is what the example in the link does).
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<!-- This is the Hidden Buttons that you need to add and reference in the ConfirmButtonExtender -->
<asp:Button ID="HiddenButtonConfirm" runat="server" Text="" style="display:none;" />
<asp:Button ID="HiddenButtonModal" runat="server" Text="" style="display:none;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="HiddenButtonConfirm" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<!-- You'll also want the ModalPopup to point to a seperate hidden button. -->
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="HiddenButtonModal" />
This javascript might work:
var confirmbtn = $find('ConfirmButtonExtenderID');
confirmbtn.enabled =false;
//ConfirmButtonExtenderID needs to be the name of your ConfirmButtonExtender ID [:$]