Does anybody know of a way to set the width of a custom validtor so that the error message text will wrap if it exceeds the specified width?
I have a user control that contains a custom validator which the containing page can set the error message on based on specific validation results.
The user control sits within a table cell in a page.
If the message is very long it simply prints the entire message on a single line ignoring any column widths that are set.
Thanks for any insight.
EDIT:
I have tried setting the width property on the custom validator itself to no avail.
Put it inside another element you can control the style of... like it's own div with a class you specify.
If the user control is defined such that the error message appears inside a div, try to set the width of that div element.
If your control is in something like this
<asp:TableCell id="some1" runat="server">
<uc:yourControl id="uc1" runat="server" />
</asp:TableCell>
Modify the control to have a div or span element for the message.
Related
I have an Ajax Slider Extender on my textbox, I am using a style sheet to change the rail to color green, that's going fine and dandy. Here is my code for the slider...
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>
<asp:TextBox ID="SliderID" runat="server"></asp:TextBox>
<asp:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="SliderID"
BehaviorID="BoundControl"
Minimum="0"
Maximum="100"
RailCssClass="SliderRail"
Orientation="Horizontal"
EnableHandleAnimation="true"
Steps="100">
</asp:SliderExtender>
</div>
and here is my CSS so far...
.SliderRail {
position: relative;
height: 18px;
width: 100%;
background-color:green;
}
I know how to add an image to the handle, but what I am trying to figure out is how when I move the handle from step 0 to step 50, I need to mask over those steps with a dark grey and I can't really figure it out.
I have tried adding an image to the handle and have tried setting the width to a 100%, but that didn't work out at all for me.
My end result is figuring this problem out, then trying to replicate this using a multi handle extender when I have both handles at either end, it would do the same as the left handle, just backwards. Then I'll need to make sure that the handles can run over eachother...But that is the end result that I need to do.
I don't want to use JQuery or JavaScript, just want to keep it strictly css.
There isn't much documentation on using multi handles.
If this question has been asked a million times then I apologize, I must have been using the wrong search terms because I haven't found anything to tell me how to do this.
Thanks for all and any help
http://dotnetslackers.com/Ajax/re-70082_SliderExtender_layout_and_custom_appearance.aspx
Custom Appearance
In order to customize the slider’s appearance, we need to:
Provide a CSS class for the rail
Provide a CSS class for the handle
Provide an image URL for the handle’s image.
Steps to perform:
Create a CSS class for the slider’s rail. The CSS class must contain the following attributes:
The position attribute must be set to relative.
Default values for height and width attributes must be provided. The width value can be overridden through the Length property of the SliderExtender.
To embed a background image for the rail, use the background attribute.
2. Create a CSS class for the slider’s handle. The CSS class must contain the following attributes:
The position attribute must be set to absolute.
Values for height and width attributes must be provided.
3. Provide an image for the slider’s handle. The height and width sizes of the image must be equal to the height and width values specified in the handle’s CSS class.
Set the RailCssClass property of the SliderExtender instance to the name of the rail CSS class.
Set the HandleCssClass property of the SliderExtender instance to the name of the handle CSS class.
Set the HandleImageUrl property of the SliderExtender instance to the URL of the handle’s image.
I have a Div that holds a RadioButtonList with 2 values and a required field validator.
As you can see the validator wraps to the next line (Circled). I am trying to get it to display next to the RadioButtonList (where the red dot is). No matter what I do it remains on the next line.
I have made the cell wider with no effect. I have set Display to Dynamic, no effect. With all the other controls on the form (textboxes & Drop downs) the validator displays correctly but this one wont. It is the same in Design mode as it is when I run the app.
On the RadioButtonList I set RepeatDirection to Flow. Its fixed the problem.
I think the size of the div where you place the radio button control is small.Can you please increase the size of that div.
I have a validator that has the associated error text set as below.
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="1" ControlToValidate="EmailTB"
Text="<div class='error-left'></div><div class='error-inner'>required</div>"
Display="Static" Width="100%" runat="server" SetFocusOnError="true" />
I put this validator on the third td of a tr. Th first two td are the name of the field and a textbox. The problem is that even if the error text is not shown, it seams to dstort the whole table layout by having width and height. I understand that ASP>NET uses javascript to make the text inside visible when the error text should be shown, but I don't like the fact that the layout is distorted by the height of a label which should not be activated. Look in the photo bellow:
Observations:
- This is the only validator in the form, this is why the tr for the email is so high (as the error-left class has this height)
Change the Display property to Dynamic - which will have the style set to "display: none;" until it's triggered.
Instead of including code even when there is no error, make it include code only if there is an error.
I would like to add div's and text to a specific DIV with ASP.NET, i have only found code which allowed controls to be added to the body but not to a specific Div.
I'm assuming you want to add controls and text to the div element server-side. If so, you can simply add runat and id attributes to the div and it will be available to you on the server.
For example, if you have a div on your page declared like this:
<div id="MyDiv" runat="server"></div>
You can add text, html content or other controls to it using the following:
MyDiv.InnerText = "some inner text"; // adding text
MyDiv.InnerHtml = "<div>inner html</div>"; // adding html
MyDiv.Controls.Add(new LiteralControl("a literal control")); // adding a control
Change the outer div to an <asp:Panel control. A Panel renders to html as a normal div, and will make it easy to add items from server code.
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).