I have the following div in a page, but the button is being rendered below the input, despite there being plenty of room for them both in the same 'row' as I want them. How can I force this 'same row' issue?
<div id="pageHeader" style="text-align: right;">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
</div>
NEW: This issue was due to the fact that I'm using telerik ajax here, and had included searchInput as an updated control in the ajax settings of my RadAjaxManager. This control 'wraps' all of its updated controls in block displayed divs by default. I just had to override this default as follows:
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
By default, input elements render with display:inline, which makes them appear in line :) However, in your case it seems that something is breaking the default behavior, so you will need to explicitly specify that you want display:inline instead of display:block. So, to sum up:
You can use the following CSS to obtain the desired view:
#pageHeader input
{
display:inline !important;
}
Thank you so much for the code. It worked great. Telerik Ajaxmanager was the problem.
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
You can also change your existing div to be an asp:Panel that gets updated by the RadAjaxManager (rather than the individual control(s)):
<asp:Panel id="pageHeader" runat="server" CssClass="righty">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
This may result in an additional control being posted back - and so is slightly worse performance-wise - but I think it improves readability somewhat.
Related
I got a problem where when the button is clicked, the panel would not change. In the sense of error. I can change the panel using the following hyperlink.
Test
But I want to use an asp:LinkButton and it did not work like this.
<asp:LinkButton ID="btngantipassword" runat="server" CssClass="btn btn-lg btn-primary btn-block" href="#" OnClick="$('#panel1').hide(); $('#panel2').show()">Change Password</asp:LinkButton>
I am still a beginner in using asp.net. Help me to solve this problem.
Almost every Control has a Visibility property. This property can be set on the aspx page in the Control itself
<asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
The property can also be set in code behind
Label1.Visible = false;
The visibility property works different than with JavaScript and CSS. Normally if you define a CSS class with display:none for example, you won't see it in the browser but it DOES exist. If you look at the HTML you can find it.
But in asp.net the hidden control is not rendered to the browser and therefore does not exist in the HTML.
To expand this to your question. The Panel Control can be used like you ask in your question.
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server">
<p>Normal Content here...</p>
</asp:Panel>
This will render in HTML as
<div id="Panel1">
<p>Normal Content here...</p>
</div>
With the OnClick event of LinkButton1, you can change the Visibility of Panel1
protected void LinkButton1_Click(object sender, EventArgs e)
{
if (Panel1.Visible == false)
{
Panel1.Visible = true;
}
else
{
Panel1.Visible = false;
}
}
I have this html checkbox with css applied to it.
Here is the jsFiddle.
JsFiddle
It works perfectly , the problem is when i am trying to apply the same css to asp.net checkbox, it is not working.
Here is the code for html input control.
<input type="checkbox" name="chkReservaSemanal" id="chkReservaSemanal" class="css-checkbox" runat="server" /><label for="chkReservaSemanal" class="css-label">Week</label>
And here is the code with asp.net.
<asp:CheckBox ID="chkSemanal" runat="server" AutoPostBack="True" OnCheckedChanged="chkSemanal_CheckedChanged1" CssClass="css-checkbox"/>
But when applied to asp.net checkbox it is not working.
The css is on the jsFiddle.
Check the rendered code from ASP.NET. The CssClass that you define is added to a wrapper around the input and label controls.
So you can add css rules to compensate:
input[type=checkbox].css-checkbox,
.css-checkbox input[type=checkbox] { ... }
Or you can use code behind to attach the class names to the label and input controls separately:
chkSemanal.InputAttributes["class"] = "css-checkbox";
chkSemanal.LabelAttributes["class"] = "css-checklabel";
Web controls in the System.Web.UI.WebControls namespace may render differently in different browsers. You can't count on them rendering the same elements always. They may add anything that they think is needed to make it work in the specific browser.
For example, an asp checkbox:
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="myClass" />
May render with a span:
<span class="myClass"><input id="CheckBox1" type="checkbox" /></span>
as you can see it's the span who have the classname and not the input type checkbox.
The best way to render it as you want is to use:
CheckBox1.InputAttributes.Add("class", "myCheckBoxClass")
Just to say:
CheckBox1.CssClass
will render the same way as adding a CssClass attribute and may add spans.
Hope this would be helpful, I faced this problem before and this is one of the ways to solve it.
As the asker didn't mention how he got it working, I'll share the solution suggested by #MALK:
<span class="css-checkbox">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Click me!" CssClass="css-label" AssociatedControlID="CheckBox1"></asp:Label>
</span>
And to prevent style lost after a PostBack, in the Page.Load event:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Me.CheckBox1.InputAttributes("class") = "css-checkbox"
Me.CheckBox1.LabelAttributes("class") = "css-checklabel"
End Sub
Best regards.
is there a way to scroll-down to a particular div when the page loads? i have 100+ rows so when the page loads i am highlighting the div background based on certain conditions so same way is that possible to position to the particular div?
i am using a repeater with
<asp:Repeater EnableViewState="true" ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<div style='padding: 10px;' id="mydiv" runat="server">
<div>
<asp:Label runat="server" ID="lblName" Text='<%# Eval("Name") %>'> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (......)
mydiv.Attributes.Add("class", "selected_div");
}
Use tabindex property of div. set the focus of div using tab-index.
check this link : Set keyboard focus to a <div>
If you are using jquery, you could use the scrollTo plugin, on the page's ready function, using your "selected_div" class as selector.
Such as:
$(document).ready(function() {
$(document).scrollTo('.selected_div');
}
Without jquery you can use the standard javascript function .scrollIntoView(true) on the div element. However, you'd have to locate the element first, in order to call that function.
A combination of both is also valid. Using jquery to locate the selected div using your class selector, and on the element calling .scrollIntoView(true).
I'm using more than one TabContainer on a page in an ASP.NET project and I noticed a really strange behavior: when the page is loaded the focus jumps to the last TabContainer on the page, causing it to scroll down. I don't explicitly focus on any control so I don't understand where this is coming from. I also switched places between the controls and it is always the last one that is focused.
The TabContainers don't have any fancy settings, this is basically what they look like:
<cc1:TabContainer ID="tabContainer" runat="server">
<cc1:TabPanel runat="server" HeaderText="Header1" ID="tabPanel1" TabIndex="0">
<HeaderTemplate>
<asp:Label ID="lblTab1" runat="server" Text="Tab1"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="Header2" ID="tabPanel2" TabIndex="1">
<HeaderTemplate>
<asp:Label ID="lblTab2" EnableViewState="False" runat="server" Text="Tab2"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
I know I can set focus on a control, I tried it but the page first scrolls to the tab container and then returns to the focused control (it doesn't look good). I tried this to set the focus to another control:
<body id="main" onload="javascript:document.getElementById('lnkLogout').focus();">
Is this the standard behavior for the TabContainer? How can I get rid of it?
Place script below right after ScriptManager control:
<script type="text/javascript">
Sys.Extended.UI.TabContainer.prototype._app_onload = function (sender, e) {
if (this._cachedActiveTabIndex != -1) {
this.set_activeTabIndex(this._cachedActiveTabIndex);
this._cachedActiveTabIndex = -1;
var activeTab = this.get_tabs()[this._activeTabIndex];
if (activeTab) {
activeTab._wasLoaded = true;
//activeTab._setFocus(activeTab); -- disable focus on active tab in the last TabContainer
}
}
this._loaded = true;
}
</script>
Try this out. It helped me:
window.Sys.Application.findComponent('<%=tabContainer.ClientID %>');
tabContainer.set_activeTabIndex(1); ( //Here set the id of the last tab that is the index of the last tab. Index will start with 0 upto last - 1 as in array.. )
This is an old thread, but it never got resolved – here or in any of the other threads I found – and I had the same problem.
I fixed it by putting my javascript in the body element: onload="scrollTo(0,0);"
You can set focus server-side to avoid the page jumping around.
Try this in Page_Load:
PageUtility.SetFocus(foo);
Also check you whether you are setting Page.MaintainScrollPositionOnPostback.
Let me know if that helps.
UPDATE - you can simply call .Focus() on whatever control you want to be in focus by default.
eg: YourControlToFocus.Focus()
I had a similar problem, but I found a more simple solution.
In the case you use a:
<asp:toolkitscriptmanager ID="ScriptManager1" runat="server">
</asp:toolkitscriptmanager>
and more panel in the tab container ( 3 for example):
<asp:tabcontainer runat="server" ID="tc1" ActiveTabIndex="0" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
For example, you can use the property:
ActiveTabIndex="0"
OR
tc1.ActiveTabIndex = 2 'code behind
Where the integer is the ID of the tab you want to Focus.
It works for me! I Hope I can Help someone!
Enjoy
I have the following markup. The errorPanel was first only used to show server side exception messages, and works fine like that. Now I'd like to incorporate my validation summary into that same errorPanel.
<asp:Panel ID="errorPanel" runat="server" CssClass="error" Visible="false">
<div style="float: right;">
Close</div>
<asp:Label ID="errorLabel" runat="server"></asp:Label>
<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" />
</asp:Panel>
<fieldset>
<legend>Create New Role</legend><asp:Label ID="newRoleNameLabel" runat="server" AssociatedControlID="newRoleNameText">Role Name:</asp:Label>
<asp:TextBox ID="newRoleNameText" runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator ID="newRoleNameRequired" runat="server" EnableClientScript="true" ControlToValidate="newRoleNameText" Display="Dynamic" ErrorMessage="Please enter a role name.">*</asp:RequiredFieldValidator>
<asp:Button ID="createButton" runat="server" Text="Create" OnClick="createButton_Click" />
</fieldset>
My problem now is that the required validation happens client side, and I want to keep that, so I have no server side opportunity to make errorPanel visible, in order to make the validation summary visible.
I see I have two options: Do validation server side, and use my code there to make the panel visible, or hook into the client side code somehow and catch an event there when the summary should be made visible, and then also make the errorPanel visible. How could I go about the latter?
Here is an approach which is really not recommended, but I had fun writing it, and it might lead you to some zany ideas!
(p.s. I am using jQuery to make life easier)
Take the Visible="false" off your asp:Panel, we'll do it all client side.
<asp:Panel ID="errorPanel" runat="server" CssClass="error">
Now, at document ready time we will hide the panel, and mess with ASP.NET's validation code.
$(document).ready(function () {
// This is more like it!
$("#<% =errorPanel.ClientID %>").hide();
eval('ValidatorCommonOnSubmit = ' + ValidatorCommonOnSubmit.toString().replace('return result;', 'myValidatorHook(result); return result;'));
});
That eval takes the ValidatorCommonOnSubmit() function which is generated by the ASP.NET validators, and modifies it in place so just before it returns its result, it calls myValidatorHook() with that result.
(see this StackOverflow question for where I got the idea)
Now, our hook:
function myValidatorHook(validated) {
if (validated) {
$("#<% =errorPanel.ClientID %>").hide();
}
else {
$("#<% =errorPanel.ClientID %>").show();
}
}
Simple enough - if the validator returned true (page validates), hide the panel; if it returned false (page did not validate), show it.
Use at your own risk! If the JavaScript generated by the ASP.NET validators changes, this will break horribly - but I did test it in ASP.NET 2.0, 3.5 and 4.0, and it worked the same in all three.
I had a similar problem where I had a containing div around a set of ASP validation fields, I wanted to only show the container if there was an error to show.
I used jQuery to hide the container as per Carson63000's answer, but then used jQuery to look at the visibility of the errors and show the container again if something was visible.
jQuery(function () {
jQuery(".checkout-validation").hide();
var show = false;
jQuery(".checkout-validation span").each(function () {
if (jQuery(this).css('display') != 'none' && jQuery(this).css('visibility') != 'hidden') {
show = true;
}
});
if (show == true) {
jQuery(".checkout-validation").show();
}
});
The only clarification other clarification I would add is that standard validation fields are set to visibility: hidden by default and Display="Dynamic" validations are display: none
Old question, but anyway.
I found one simple and clean solution to this. No server-side, no javascript needed.
You can simply put your content of errorPanel in HeaderText of ValidationSummary Control.
Like said on MSDN site:
The HeaderText property is not HTML encoded. Therefore, HTML tags can
be included in HeaderText.
Your example:
<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" CssClass="error"
HeaderText='<div style="float: right;">Close</div><span ID="errorLabel" runat="server"></span>'/>
<fieldset>
...
And PLBlum also nailed it on Microsoft asp.net forum: