I've received from a design agency the following html to be displayed in a form on one of asp.net webapps:
<label>
<input type="radio" />
Label Text 1
</label>
<label>
<input type="radio" />
Label Text 2
</label>
<label>
<input type="radio" />
Label Text 3
</label>
You can imagine that the output produced will place the radio button on the left of the label text.
Since the number of labels/radio buttons is variable I decided to use the RadioButtonList to dynamically manipulate the number of controls added.
The problem with the RadioButtonList is that the html produced by it is not very flexible.
The nearest that I got to the layout my customer wants is the following code. But this places the radio buttons on the right of the label. :(
<asp:RadioButtonList ID="DayOfWeekRadioButtonList" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical" TextAlign="Left">
</asp:RadioButtonList>
And here is the generated HTML:
<label for="ControlID1">Text 1</label>
<input id="RadioControlID1" type="radio" name="NameRadioControlID1" value="Text 1" />
<label for="ControlID2">Text 2</label>
<input id="RadioControlID2" type="radio" name="NameRadioControlID2" value="Text 2" />
<label for="ControlID3">Text 3</label>
<input id="RadioControlID3" type="radio" name="NameRadioControlID3" value="Text 3" />
Is it possible to place the input control within the label?
You won't be able to get the RadioButtonList control to render the button inside the label as you describe without perhaps making a custom control to override the behavior.
As womp mentioned, you need to set TextAlign="Right" instead of "Left," or if you leave that attribute blank it should default to the expected behavior. Setting it to "Right" means "align the text to the right of the radio button." You have the opposite with "Left."
Instead of making a custom control you could use regular labels and RadioButton controls to get the desired output, but you would need to associate a GroupName and check each button individually. This can be enhanced by placing them in a Panel control then looping over them and determining which is selected.
It's more markup but it matches the format you mentioned:
<label>
<asp:RadioButton ID="rbMonday" runat="server" GroupName="DaysOfWeek" />
Monday
</label>
Frankly though, the markup shouldn't matter since it doesn't provide any extra functionality. Ultimately you want to capture the input, and whether the label contains the radio button or not doesn't affect that goal. If the agency you're dealing with is flexible about that you can explain the different options and perhaps they will accept the default formatting, which makes you more productive and allows you to spend less time on this (which, in turn, should make them happier).
Your TextAlign property is set to "Left", which means the text goes to the left of the buttons. I believe setting it to TextAlign = "Right" should do what you want.
Related
I want to make the input class= form control field bigger and multi-line. I managed to do something similar in my last project but have deleted it and forgotten how to do it. Pretty much a text box but when I use text area it won't allow "asp for"
<label asp-for="Incident_Detail" class="control-label"></label>
<input asp-for="Incident_Detail" class="form-control" />
<span asp-validation-for="Incident_Detail" class="text-danger"></span>
The problem is the self-closing. Just try:
<textarea asp-for="Incident_Detail" class="form-control"></textarea>
Note: You really should change this kind of property (size, width, height, etc...) from CSS. It allows you have responsive layouts, and make the whole solution/project a lot easier to maintain. Alternatively you could use rows for height and cols for width: <textarea asp-for="Incident_Detail" class="form-control" rows="4" cols="100" />
Note 2: The self-closing is currently (html 5) invalid html markup for some elements (including textarea). Since MVC Tag Helpers doesn't override what is in your cshtml file, the output end up messed up.
I have a label element as below:
<asp:Label ID="date" runat="server" Text="<%$ Resources:Resource, DATE%>" CssClass="col-sm-4 control-label" />
When I render this in the browser somehow this gets generated to span element as below:
<span id="ctl00_MainContent_FormDate_Date" class="col-sm-4 control-label">Date</span>
which makes it look different on the page.
But when I use text instead of resource:
<asp:Label ID="date" runat="server" Text="Date" CssClass="col-sm-4 control-label" />
this renders correctly:
<label for="ctl00_MainContent_FormDate_Date" class="col-xs-4 control-label">Date</label>
Anyone come a cross this issue and how can I fix the issue to render as <label> when using resources?
Though I know you have already got the solution, I am answering for the future reader of the post.
If you set the Label.AssociatedControlID value it becomes a label element.
If it is not associated to a control or in other words not being used as a label element it becomes a span element.
A label which is not associated with a control is considered as a bad mark up. Hence if the label control is not assigned to a control, instead of placing a label .NET places that as a span element.
With the following markup:
<div class="paymentOption">
<input type="radio" name="paymentOption" value="1" />
<span class="marginLeft10">1-time payment using a different credit card</span>
</div>
Using CSS only, how do we select the div that contains a selected radio button? (is this possible?)
This is currently impossible with CSS. You can use jQuery though:
http://api.jquery.com/has-selector/
when I create a checkbox with ASP.NET, its label is always at the bottome level of the checkbox. but I want them to be at the same level so that it looks nice. I achieved that as follows;
<table>
<tr>
<td>
<input type="checkbox" id="chxAgreed" name="chxAgreed" />
</td>
<td>
<label for="chxAgreed">Agreed</label>
</td>
</tr>
</table>
but I do not want to use table inside my markup so much. How can I do the same without table?
If the question is only about markup (and not ASP, which I have no knowledge of), this is always a good way to do checkboxes:
<label for="chxAgreed">
<input type="checkbox" id="chxAgreed" name="chxAgreed" />
Agreed
</label>
Benefits this has over other markup structures:
Alignment is easy, practically automatic
The checkbox and label will be a single clickable area to check/uncheck to input, rather than two separate ones.
You can actually omit the for attribute of the label, and the id of the input if desired, it will be implied that the label is for the input it contains.
You can do some pretty nice stuff with CSS using this markup.
The only downside I can think of is that if you want to style the label text (and not the entire label), you'll have to wrap the text in a <span>.
I have the following form
<form id="enter_email" method="post" action="">
<input type="text" value="enter email" />
<input type="image" src="images/buttons/join-now.png" />
</form>
I was wondering if I can delete the value that shows on the text box by just css :focus alone,
thanks
No you have to use script for that.
<input id="txt1" type="text" value="test value" onfocus="this.value='';" />
There are ways in CSS to prepend/append content to a certain element, but nothing for modifying attribute values. But, if you really want to make use of CSS for this, you can have text as a background-image to that input and just change the background on :focus.
No, you cannot change data using CSS. You would have to use JavaScript and assign the value of the element to an empty string.