I am having a hard time aligning radio Buttons to the left in MVC 4 template using RadioButtonFor.
For some reason they are placed in the middle, abd it only happens with radio buttons below is a picture:
I have tried to float the div but it did not work .
I also tried to add css class to radio button helper but I got an overload error for the function RadioButtonFor
I even tried to put it into a table
Please advice, here is my code
<div class="editor-field" >
<table>
<tr>
<td>
#Html.RadioButtonFor(model => model.isChildTakingMedicine, true, new { #onchange = "showTextBox()" }) YES<br />
</td>
</tr>
<tr><td>
#Html.RadioButtonFor(model => model.isChildTakingMedicine, false, new { #onchange = "showTextBox()" }) NO
#Html.ValidationMessageFor(model => model.isChildTakingMedicine)
</td>
</tr>
</table>
</div>
It was the width of the radio button to wide, the default css gives a large width to all input tag.
Added the following CSS to fix it:
input[type="radio"]
{
width: 20px;
}
For some reason it took me longer than expected to arrive at the correct structure for my bootstrap'd situation. I wanted to save others the pain and I hope this layout can help. The data model, in my case, was simply an integer called Status.
<div class="form-group">
<label class="col-sm-2">Status</label>
<div class="col-sm-10">
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 1) Acknowledged </label></div>
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 2) In Progress </label></div>
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 3) Closed/Fixed </label></div>
</div>
</div>
I don't know that this necessarily answers your question, but I thought this may be helpful information for anyone having a similar issue:
I have a table with rows and columns of radio buttons (user is meant to select 1 of the radio buttons in each row). The radio buttons were not lining up with the row or column header texts. Guess what fixed it - adding a border to the table! I tried all sorts of things first, using align and valign, or align within style...that kind of thing. I took all that off and just set "border=1" for the table. Voila - radio buttons are all left aligned with the header text!
Related
We have a vue-js page (#vue/cli 4.5.6) with numerous components, which mostly works fine. One component is doing something I don't understand: There are two radio boxes, one at the top of the page, one at the bottom. They seem to be completely unrelated; here's one
<template v-for="qSection in qSections">
...
<!--- loop to output individual questions here --->
<tr v-for = "question in qSection.questions">
<td>
{{ question.txt }}
<div v-if="question.incf">
<br/>
<textarea rows="2" cols = "80" :name= "question.cmt"
v-model="question.cmt" placeholder = "Comments here"
class="hideOnPrint"
/>
<div class="print-only"> {{ question.cmt }} </div>
</div>
</td>
<!-- okay, three more tds to hold radio box-->
<template v-for="icnt in [1,2,3]">
<td>
<label v-if="question.otherAns" class="other-ans-label">
{{ question.otherAns[icnt].txt }}
</label><br/><br/>
<input type = "radio" :name= "question.quesn" :value = "(icnt%3)"
v-model="question.answer"/>
</td>
</template>
</tr>
Here's the other
<template v-if="section.otype1 != 'Laboratory'">
<div class="hideOnPrint">
<input type = "radio" :name = "section.accept" :value="1"
v-model="section.accept"
>
{{acceptPhrase}}
</input>
<br/><br/>
<input type = "radio" :name = "section.accept" :value="0"
v-model="section.accept"
>
Investigation is incomplete. See comments.
</input><br/><br/>
</div>
</template>
So what has been happening is that clicking the radio button in the bottom area (only for value="1") un-clicks the radio button in the top area (question.answer, whichever is chosen).
According to the Vue app in Developer Tools, the top area data is still set: questions.answer = 2 still, say. And indeed if I set it equal to 1 there and back to 2, that radio box gets re-checked correctly.
How is this happening and what do I change to fix it? Or what should I do to diagnose it. Thanks!
I'd like to put up a working example but not sure how; the rest of the page has a lot of parts.
Oh, wow: I realized my mistake. It's those lines in the code,
:name= "question.quesn"
and
:name = "section.accept".
These are setting the name of the radio box to the value of those fields. They both end up equal to 1, and therefore the two radio boxes become a single radio box. Clicking one turns the other one off.
Shouldn't be using name at all; v-model does the job.
I read tablesorter pager not updating and tablesorter issue tabs zebra widget and other resources but it doesn't help me.
My tables on two tabs will not show. Only if I reload the page with one of the table tab active I can see this tab table (not the other table on the other tab).
tablesorter 2.26.6
jquery 2.2.3
bootstrap 3.3.6
templatetoolkit 2.24
The [% ... %] is the templatetoolkit language I used to build the webpage or tables.
I have a page with seven tabs (createt with bootstraps class="nav nav-tabs" and class="tab-content"):
<ul class="nav nav-tabs" id="myTabs">
<li class="active">Server List</li>
<li>Network Config</li>
<li>Storage Config</li>
.
.
</ul>
<div id="myTabs" class="tab-content">
<div style="height: 620px;" class="tab-pane active" id="pool_srv">[% INCLUDE 'view-xp/srv.tt' %]</div>
<div style="height: 620px;" class="tab-pane" id="pool_net">[% INCLUDE 'view-xp/net.tt' %]</div>
<div style="height: 620px;" class="tab-pane" id="pool_storage">[% INCLUDE 'view-xp/sr.tt' %]</div>
.
.
</div>
</div>
Two of this tabs has a table with a unique id and connected to tablesorter.
First table:
<table id="fsi_xpsr" class="tablesorter table table-condensed table-hover table-striped" >
<thead>
<tr class="fsitableheader">
<th width="220px">sr name</th>
<th width="50px ">typ</th>
<th width="200px">shared</th>
<th width="768px">description</th>
</tr>
</thead>
<tbody>
[% FOREACH uuid IN srs.keys.sort %]
<tr>
<td width="220px">[% srs.$uuid.item('name-label') %]</td>
<td width="50px ">[% srs.$uuid.item('type') %]</td>
<td width="200px">[% srs.$uuid.item('host') %]</td>
<td width="768px">[% srs.$uuid.item('name-description') %]</td>
</tr>
[% END %]
</tbody>
My second tab has a other table (like the first) with id="fsi_xpnet"
My javascript section for this two tables and tablesorter:
<script>
$(document).ready(function () {
$("#fsi_xpnet")
.tablesorter({
theme: "bootstrap",
showProcessing : true,
headerTemplate: '{content} {icon}',
widthFixed: true,
widgets: ["storage", "saveSort", "uitheme", "filter", "scroller"],
widgetOptions: {
filter_reset : 'button.reset',
filter_hideFilters: false,
filter_ignoreCase: true,
filter_saveFilters: true,
filter_cssFilter: "form-control",
scroller_height: 578,
scroller_upAfterSort: false,
scroller_jumpToHeader: false,
}
});
$("#fsi_xpsr")
.tablesorter({
theme: "bootstrap",
showProcessing : true,
headerTemplate: '{content} {icon}',
widthFixed: true,
widgets: ["storage", "saveSort", "uitheme", "filter", "scroller"],
widgetOptions: {
filter_reset : 'button.reset',
filter_hideFilters: false,
filter_ignoreCase: true,
filter_saveFilters: true,
filter_cssFilter: "form-control",
scroller_height: 578,
scroller_upAfterSort: false,
scroller_jumpToHeader: false,
}
});
At github issue I found a tip, that I must bind a event. But I do not unterstand how this works or why it not works on my page. I add the following javascript code to my <script> section above:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.tab-pane.active').find('table').trigger('applyWidgets');
});
If I start the firefox inspector I can see, that the source ok (dark source, not gray) and the I can see where the table is located - but I see only white space:
Regards
Jochen
It looks like the issue is because the scroller widget isn't updating itself when the "applyWidgets" is used. It is actually waiting for the window to resize before it resets the size of the scroller window, which is set to zero because the tab was hidden. This has been fixed in the master branch of the repository and will be available in the next release.
In the mean time, you can trigger a window resize to get the tabs to update (demo)
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.tab-pane.active').find('table').trigger('applyWidgets');
$(window).resize();
});
So the reason why the above code is needed, is because the zebra is only looking to add a stripe to visible rows. When the table is hidden inside a tab, no zebra striping is applied. The above code listens to the bootstrap tab script to detect when the user switches tabs. It then updates all of the widgets, in which case the zebra widget will now detect visible rows and add stripes.
The scroller widget automatically adjusts the width of the scroll window based on the table width. When the table is hidden inside of non-visible tab content, the table width is zero. So the scroller sets it to zero. The widget is looking for a window resize before it updates, so that is why we trigger that event. Again, the extra window resize code will not be necessary after the next release.
I'm looking for the best way to set the width of the KendoUI dropdownlist - via the Kendo HTML Helper.
#(Html.Kendo().DropDownList()
.Name("ddlAccount")
.DataTextField("Name")
.DataValueField("Id")
//This doesn't work, it styles the hidden input instead of the ddl
.HtmlAttributes(new {style="width:200px;"})
)
I'm setting the width of the DropDownList, but notice in the generated HTML, the width of 200 pixels is set on a hidden text input, not the dropdownlist:
<span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="ddlAccount_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" class="k-widget k-dropdown k-header styled_select" style="" unselectable="on" aria-activedescendant="ddlAccount_option_selected">
<span class="k-dropdown-wrap k-state-default">
<span class="k-input">Choice One</span>
<span class="k-select">
<span class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input id="ddlAccount" name="ddlAccount" style="width: 200px; display: none;" type="text" data-role="dropdownlist">
...So the resulting DropDownList still scrolls both horizontally and vertically, which I don't want.
#Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" }) on server side work for me and documented on http://docs.kendoui.com/ . May be not so long.
With js, from the Kendo site:
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
JsFiddle
Just thought I'd add to this as it did help me...
If you want to apply something that extends the width of the List beyond the width of the input, you can do this using a jQuery selector and a css class.
note: this is for the comboBox, but should work equally well with the DropdownList
So you add this
#(Html.Kendo().ComboBoxFor(m => m.UserId)
...
.HtmlAttributes(new { #class = "wideList" })
)
Then add a piece of Javascript that does this:
$(document).ready(function () {
$("input[data-role=\"combobox\"].wideList").each(function () {
var combo = $(this).data("kendoComboBox");
combo.list.width(400);
});
});
To take a step further yet, you could actually make it more generic by allowing the width to be specified when defining the dropdown:
#(Html.Kendo().ComboBoxFor(m => m.UserId)
...
.HtmlAttributes(new { #class = "wideList", listWidth = "400" })
)
Then the more generic javascript of:
$(document).ready(function () {
$("input[data-role=\"combobox\"].wideList").each(function () {
var combo = $(this).data("kendoComboBox");
var width = $(this).attr('listWidth');
combo.list.width(width);
});
});
Here you go:
$("#Dropdopwnlist").kendoDropDownList().parent().css("width", "200%");
Simple and it works for me after spending an hour!
I am working in ASP.Net MVC4 with Dojo. I have a strange problem when I am adding new rows to html table. I need to have a table which supports adding and removing rows and textboxes inside should have dojo style. I referred the post http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ad tried to create the same thing. Let me explain my code. Below is my view
#section scripts {
<script type="text/javascript">
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
}
<table id="servicesTable">
<tr>
<th>
<label id="lblSelectService">
Select</label>
</th>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblTitle">
AE Title</label>
</th>
</tr>
#for (int i = 0; i < Model.Services.Count; i++)
{
#Html.Partial("_ServiceRow", Model.Services[i])
}
</table>
My partial view for rendering each row is like below
#model WebUI.Models.RemDevServiceViewModel
<tr>
<td>
#Html.CheckBoxFor(x => x.IsMarked,
new { id = #String.Format("Service[{0}]IsMarked", #Model.ID) })
</td>
<td>
<input style="width: 100px; id="Service[#Model.ID]Name"
name="Service[#Model.ID].Name" type="text"
data-dojo-type="dijit/form/TextBox" value="#Model.Name"/>
</td>
<td>
<input style="width: 100px;" id="Service[#Model.ID]Title"
data-dojo-type="dijit/form/TextBox"
name="Service[#Model.ID].Title" type="text"
value="#Model.Title" />
</td>
</tr>
I have an add button which will add new row to the table. The problem that I am facing is, new row does not get the dojo style and they are rendered as normal textboxes. Initially loaded rows are rendered as dojo style text boxes, but the newly added are not like that. My jquery function to add new rows is like below
function addNewService() {
$.ajax({
url: rootPath + "MyController/AddNewService",
type: "get",
cache: false,
success: function (html) {
$("#servicesTable tbody").append(html);
},
error: function (ts) {
alert("Error while adding services");
}
});
}
Can any one tell me how to solve this? Please note that I am aware about the existence of Dojo grid. I want to take the advantage of model binding and hence following this style
Try running the parser over the added nodes. Are you seriously loading jquery on the page as well? Anyway, with the code you've got, it's kind of tricky to select the just added nodes, but if you put the following inside the success method it might work.
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/parser"], function(parser){
newNodes.forEach(function(node){
parser.parse(node);
});
});
If you parse over nodes that were already parsed, the parser will throw an error. Also, if you need to support older browsers you'll want to replace the forEach with a standard for loop.
Thanks a lot David for your reply. Your code did not work exactly, but I got the idea and below code is working for me. Please dont feel that I am answering my own question. I want to format the code properly and hence using this view. Once again thanks a lot
success: function (html) {
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/_base/array", "dojo/parser"], function (array, parser) {
array.forEach(newNodes, function (node, i) {
parser.parse(node);
});
});
I meet a headache problems, when I use dojo to develop a frontend UI. I have google this problem for a long time. So does the mailist and bugtracker.
When I open a page with TabContainer and swith to a Tab, the DataGrid in the Tab didn't properly displayed.Now I switch to another Tab and switch back again, the grid properly displayed.I implement this in Declarative dojo. Only one line javascript code.
<script>
function imgFormatter(s) {
return '<img src="' + s + '"/>';
}
</script>
situation is like this:
Open the page
http://i.stack.imgur.com/QGeid.png
switch to another Tab and siwtch back again
http://i.stack.imgur.com/OWQxR.png
code:
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="tab1">
tab1
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="Hosts">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
<div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="url: dojo.config.api2Path + '/GangliaHostMetric', urlPreventCache:true, clearOnClose:true" data-dojo-id="gangliaHostSummaryStore"></div>
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="region: 'center', query : {}, store:gangliaHostSummaryStore" data-dojo-id="gangliaHostSummaryGrid">
<thead>
<tr>
<th field="hostname">hostname</th>
<th field="load_report" width="300" formatter="imgFormatter">Load</th>
<th field="mem_report" width="300" formatter="imgFormatter">Memory</th>
<th field="network_report" width="300" formatter="imgFormatter">Network</th>
<th field="cpu_report" width="300" formatter="imgFormatter">CPU</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
IF the grid si the only thing displayed in the tab, then you don't need all these BorderContainers and ContentPanes, put the grid as directChild of the TabContainer.
Otherwise, it is a famous problem, one way to solve this is to create the grid programmatically after the tab onLoad. Tha means basically connecting to tab onLoad event, and create the grid here.
Another way to fix it is to play around with doLayout, isLayoutContainer, and specify the size of the parent widget also.
With all of this you should find a suitable solution to your problem. If you want more guidance, I'd recommand joining irc freenode #dojo. There you'll maybe find someone to guide you step by step :)