I have created a radiobuttonlist which items in it are generated dynamically based on my database. And I'm using VB webform.
IN HTML:
<asp:RadioButtonList ID="rdlSession" runat="server" CssClass="rdl">
</asp:RadioButtonList>
VB:
For count = 0 To someitem.Length 'databaseitem
With rdlSession.Items
.Add(someitem)
End With
Next
My question is:
How to align the rows to start from the red line ?
(I have tried using text-allign:left,but the output doesnt affect much, the first line appears after the radiobutton.)
You need css to solve that problem.
RadioButtonList is (if You see Page Source) table with rows where are RadioButtons placed.
For example, 1st item of RadioButtonList in html will be (two "elements" : one is <input type="radio" id="rdlSession_0" ...> and label for that input) :
<input id="rdlSession_0" type="radio" name="rdlSession" value="Session :0<br>Date :0<br>Coach :0<br>Available slot :0" /><label for="rdlSession_0">Session :0<br>Date :0<br>Coach :0<br>Available slot :0</label>
You need to apply some css for that label.
HTML
<asp:RadioButtonList ID="rdlSession" runat="server" CssClass="rdl">
</asp:RadioButtonList>
CSS
.rdl label
{
display:inline-block;
vertical-align:top;
}
If You remove vertical-align:top;, radio button will be aligned at bottom.
I hope so this solution will work for You.
Related
Note, this is not just another "margin-right" post. Select2 seems to be screwing me over.
I have a form that looks like this:
And this is what the same formatting looks like with an error — the email address error is formatted correctly.
Edit: Revisiting this question, it's not clear to me how the second image is related. I think the point was that I could control whether the error message displayed next to or under the form item but not the button. This was years ago at this point so I don't quite remember, but I wanted to add this disclaimer.
Obviously the New button should be next to the patient dropdown.
Here's the problem:
When you tell Select2 to do its job on a select, it hides that element and adds several of its own nested elements to replace it. However, any classes you place on the select do not get transferred to these generated elements.
I've set margin-right:100% for .select2-container, which is what handles the spacing. This is to avoid the behavior in the second screenshot. I don't know of any other way to force the error message onto the next line.
If I set margin-right:0px, the button goes next to the dropdown, like I want, but then the error message also sits next to it (pictured above).
HTML source for bottom picture: (I'm posting the source for the second picture because it shows both what I want and what I don't want):
<div class="form-group">
<label class="control-label col-md-2" for="Email">Email Address</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-regex="Invalid email format" data-val-regex-pattern=".*" data-val-required="The Email Address field is required." id="Email" name="Email" type="email" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
This code markup is directly below that. The select2 stuff doesn't show up in view-source, hence the screenshot.
Fix that I'd like to avoid:
I could set margin-right:0px, then wrap the dozens of other select boxes in a div that has margin-right:100%, but that would be a raging pain in the butt.
Attempted solution that didn't work:
Setting margin-left:100% or margin-left:600px, etc on the error class.
Summary:
I need to put the New button directly next to the Select a patient... dropdown, but I don't have access to the style for the dropdown.
If it makes any difference, I'm using ASP.NET MVC with Bootstrap.
Your span is a inline element - An inline element has no line break before or after it, and it tolerates HTML elements next to it.
What I did was made it an inline-block element - An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
So as default it will be broken from it's line and align next line properly. If. It's still in the same line. In inline-block element we can set width and height as in the case of inline element it's not possible.
Tip: Always use inline-block element for your wrappers for better alignment and wrapping it's children's properly.
I am looking for some guidance on how to write an Xpath query to verify that a specific checkbox is checked (the divs nested in the panel-body div are checkboxes). What I tried to do is make sure that a checkbox div with the corresponding label containing the text "Evaluations" contains the class "checked". Here is my HTML:
<div class="panel-body">
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_conferences" class="checkradios access" name="access_conferences" value="true" checked="" type="checkbox">
</div>
<label for="access_conferences">Conferences</label>
<br>
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_evaluations_viewing" class="checkradios access" name="access_evaluations_viewing" value="true" checked="" type="checkbox">
</div>
<label for="access_evaluations_viewing">Evaluations - Viewing</label>
<br>
</div>
And here is my Xpath: //label[#for="access_evaluations_viewing"]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
The problem is my test case is passing even when that box is unchecked, which tells me my xpath is grabbing other elements. Some of the other checkboxes in the panel-body div are also going to be checked, so what I think may be happening is my Xpath is checking for the next preceding div with a class of "checked", regardless of the text that div's label contains.
Edit: as was suggested, I have tried referencing the div preceding the label. The problem with doing this is that not every box in the panel-body is going to necessarily be checked. I only need to confirm that those associated with "Evaluations" are checked. Referencing the div above the label fails when one or more of the boxes other than "Evaluations" is unchecked. This is my revised Xpath:
//label[#for="access_evaluations_viewing"]/preceding-sibling::div[contains(#class, "unchecked")]
I switched to doing the negative comparison because contains(#class, "checked") will pass for both checked and unchecked boxes.
If you need to match label that contains "Evaluations" text you may try
//label[#for="access_evaluations_viewing"][contains(text(), "Evaluations")]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
These 4 elements are siblings, so when you at the Label, you must go to the Div above to get the checkbox element.
Try this XPath:
//div[#class='panel-body']/label[contains(.,'Evaluations')]/preceding-sibling::div[1]
I have a request that I’m having difficulty working out…
Once the 'Name' field is completed, the 5 labels below it should show a red asterisk
Form
I’ve added a RegularExpressionValidator which dynamically displays a red asterisk next the name label once the textbox is populated and tabbed, however this isn’t what’s required.
RegularExpressionValidator
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtNewDos" Display="Dynamic" CssClass=" mandatory" ValidationExpression="^([\S\s]{0,1})$"></asp:RegularExpressionValidator>
ASP
<asp:Label runat="server" ID="lblNumCurStudentsDos" Text="Number of Current PGR students supervised"></asp:Label>
CSS
.mandatory:after
{
content:' *';
color:red
}
Can anybody point me in the right direction as to how I can populate my CSS class next the 5 labels once the Name text box has been populated?
Placing the RegularExpressionValidator within each label <td> </td> works
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtNewDos"
Display="Dynamic" CssClass=" mandatory" ValidationExpression="^([\S\s]{0,1})$">
</asp:RegularExpressionValidator>
I am trying to simply bind a HTML Input radio button inside a repeater :
<asp:Repeater ID="Outlets" runat="server" >
<ItemTemplate>
<input type="radio" name="Proposal" value="Test1" id="Radio1" checked="
<%#`GetSelectedValue(DataBinder.Eval(Container.DataItem,"IsDefaultSelection"))%>" />`
<label for="Test1">
<%#DataBinder.Eval(Container.DataItem, "Label")%>
</label>
</ItemTemplate>
</asp:Repeater>
The GetSelectedValue method simply returns a string "checked" for the radio button to be selected, lets say the repeater had 3 items to loop and when the markup renders and If I inspect the element I see the correct value for the first radio button i.e. checked="checked" but on the UI the 3rd radio button gets selected even though its checked value="false", can someone guide me as to what i am doing wrong?
Give this a try
<%# (bool)Eval("IsDefaultSelection") ? " checked=\"checked\" " : string.Empty %>
Basically the inclusion on the checked attribute is causing the RadioButton to be checked. You want to pull it out so the entire thing is rendered or the entire thing is absent.
Also keep in mind all your RadioButtons are going to be named Test1 It might be a good idea to use a server side RadioButton.
The CHECKED attribute in HTML has no value associated with it. You should only use this attribute if you want to select it.
You want something like:
<asp:Repeater ID="Outlets" runat="server" >
<ItemTemplate>
<input type="radio" name="Proposal" value="Test1" id="Radio1" <%
if (GetSelectedValue(DataBinder.Eval(Container.DataItem,"IsDefaultSelection"))
response.write("CHECKED");
%> />
<label for="Test1">
<%#DataBinder.Eval(Container.DataItem, "Label")%>
</label>
</ItemTemplate>
</asp:Repeater>
Otherwise you could simply use the ASP.NET INPUT controls.
I want to render a <label> tag. But want to set some of it's properties while it's rendering like for and text value.
Actually my real problem is I want to associate a label with a radio button and this is the code so far I have:
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<label for='<%=Option4.ClientID %>' id="lblOption4" runat="server">4</label>
But the problem with this code is that it is not working and rendering the for attibute's value as it is i.e. <%=Option4.ClientID %>. :-(
Is their any asp net server control which would render tag?
I don't want to set the Text property of the radio button due to some CSS limitations so plz do not give answers like why don't you set the Text property of the radio button.
if this is .NET 2.0 or later, then use the ASP.NET LABEL control.
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<asp:Label AssociatedControlId="Option4" Text="4" runat="server" />
If this is to ultimately handle accessiblity issues you could try the following tutorial: Creating an Accessible LABEL control in ASP.NET