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>.
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'm trying to implement a table with editable cells using an approach like this. The cell contains a label or span and also an input box, and I'm using a flag to decide which one to display via ng-show. But when the label is made visible, the cell expands vertically. It's subtle in that demo but you can see the second row moving down slightly.
How can I make it remain the same size, like the editable table rows in this example? I've looked at the styles in that example but I can't figure out how it's being done. The span for non-edit mode seems to have the dimensions as 'auto' but when the input form appears, it has explicit width/height - and they happen to be exactly the same.
PS. I'm open to the idea that the way I'm doing it isn't optimal, in which case any alternative suggestions would be great.
<div ng-controller="MyCtrl">
<table>
<tr>
<td>
<label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label>
<input ng-blur="editing=false" ng-show="editing" ng-model="mytext" />
</td>
</tr>
<tr>
<td>
<label>some more text</label>
</td>
</tr>
</table>
</div>
I found out why the cells don't expand in the xeditable example that I linked to in my question - it's because there's an explicit size set in the css:
div[ng-controller] table tr td {
height: 45px;
/*text-align: center;*/
vertical-align: middle;
}
I didn't find this at first because I was looking in the css file that comes with the package, and I couldn't find any rules in there that would explain it. But it's actually defined in another css file for the demo page itself (https://vitalets.github.io/angular-xeditable/docs/css/docs.css).
How do I select the radio from a list of tr's where the only unique element is 'Some unique value'?
<tr>
<td>
<input type="radio" name="myradioname" value="4" onclick="myevent">
</td>
<td>
Some value
</td>
<td>Some unique value</td>
</tr>
While this cannot be done using pure CSS, it can be achieved using jQuery's :contains selector..
Working jsFiddle
The selector you're looking for is:
$("tr:contains('Some unique value')").find('input[type="radio"]')
First you look for a <tr> that contains 'Some unique value', then you find input[type="radio"] within it.
Works like a charm. In the jsFiddle only the radio near 'Some unique value' gets checked on page load using this selector.
Notes:
There are other ways you can go about it, for e.g finding the <td> that contains 'Some unique value' then looking for the <input> inside its siblings.. However I think the way presented here is most efficient.
If you can select the table first and search only the rows inside it do it, for it will run faster.. e.g: $("#myTable tr:contains('Some unique value')").find('input[type="radio"]').
If you still want to do it using CSS alone I would recommend viewing your server side code and using a conditional statement for adding a class to that specific <tr> for example class="special" then adding a CSS rule like so: .special input[type="radio"]{...}
I have a simple asp.net web page that contain a table with about 5 TR and each row have 2 TD .. in the page load I get user data ( 5 property ) and view them in this page the following are first 2 rows :
<table>
<tr>
<td>
FullName
</td>
<td>
<span id="fullNameSpan" runat="server"></span>
</td>
</tr>
<tr>
<td>
Username
</td>
<td>
<span id="userNameSpan" runat="server"></span>
</td>
</tr>
</table>
I always used <asp:Label to set value by code but i always notice that label converted in runtime to span so i decided to user span by making him runat=server to be accessed by code, so
Which is better to use asp:label or span with runat=server ??
The answer is: Whatever works best for you.
asp controls have a different object model from html controls. There is no databinding for html controls, for instance.
EDIT:
Something to consider is whether or not you need a span element at all. Span is an html element used for inline items, and canoot hold ceratin kinds of other items (such as block items). If your html markup make sense to semantically include a span (such as you want to style the text in a specific way) then use it.
Unless you need to control attributes on the span tag, it would be better to do something like this though:
<span class="foo"><asp:Literal id="litFoo" runat="server" /></span>
You should only make an element runat="server" if you need to specifically modify the tag itself (not necessarily just it's contents). For instance, if you need to hide the span at runtime, then you make the span runat="server" so you can access it's Visible property at runtime. Otherwise, it should be left as standard html.
If all your doing is displaying something then your better off using a literal tag which add's no extra markup. Infact 99% of the time literal should be used over label.
Edit: The performance between label/span would be so tiny, if any difference between them at all, that the only reason you would be worrying about that sort of performance was if you were facebook.
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.