I have an array of models, all of them being instances of one class. I need to create a form which contains subforms corresponding to the models from the array.
Have to use CForm, because i've made a nice small extension of it, which can render subforms in CJuiTabs. In the code used at the moment POST-parameter names are wrong, because they get prefixed by the name of the class of a model from the array.
Below you can see a snippet of HTML-code generated. See those YPageInfo[...] named inputs? That's the problem - only one set of inputs with this prefix gets received by the server.
<div style="visibility:hidden"><input type="hidden" value="1" name="yform_20bd4d2c" id="yform_20bd4d2c" /></div>
<div class="row field_name">
<label for="YPageRevision_name">Name</label>
<input name="YPageRevision[name]" id="YPageRevision_name" type="text" maxlength="45" />
</div>
<div class="row field_parent_id">
<label for="YPageRevision_parent_id">Parent Id</label>
<input id="YPageRevision_parent_id_hidden" name="YPageRevision[parent_id]" type="hidden" /><input id="YPageRevision_parent_id" type="text" value="" name="autocomplete-field" />
</div>
<div id="yw1">
<ul>
<li>en</li>
<li>ru</li>
</ul>
<div id="enSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
<div id="ruSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
</div>
<div class="row buttons"><input name="submit" type="submit" value="Create" />
</div>
I found one way to do what I needed.
In the elements property of the sub-form there are some inputs declared. Each standard input element declared there is an instance of CFormInputElement, so it has the attributes property. Here you can set any HTML attribute, which will be rendered in the resulting input tag. I put my custom name attribute here, and change it in a loop, where i create sub-forms configuration items for the main CForm.
Maybe there is a better way?
Related
I am trying to resize the input field with Bulma. However, the input field stretches out across the entire screen width. Instead, I would like to center the user input with a width of say a quarter screen width.
Whatever size I enter in a div class, doesn't do anything, ie
<div class="is-size-3" >
or,
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
Would appreciate any advice.
This is what I have:
Thanks
<template>
<section>
<form >
<div class="is-size-3" >
<div class="has-text-centered">
<h1 class="title is-3">User registration</h1>
<form class="box">
<div class="field">
<label class="label">Username</label>
<div class="control">
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
<!-- #keyup.enter="enterUser" -->
</div>
</div>
<button class="button is-primary" #click="enterUser">OK</button>
<p v-if="enteredTask.length > 10">input is too long.</p>
</form>
</div>
</div>
</form>
</section>
</template>
Use the column system of bulma: https://bulma.io/documentation/columns/basics/
You could do something like this:
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<div class="control">
<input class="input" type="text" />
</div>
</div>
</div>
</div>
I'm developing an app using ASP.NET Core MVC. In the app, there are many forms. The input sections in the forms consist of some HTML that is repeated a lot. For example, for a checkbox, we're using 13 lines of HTML and in a form, we might have tens of checkboxes. Each checkbox consists of labels and input tags and in those tags, we're using the asp-for tag helper.
I was thinking that maybe we could use a partial view in order to only use one line per checkbox and limit duplication.
I tried something like this
Partial view:
#model object
<div class="form-group form-md-checkboxes">
<label asp-for="#Model" class="control-label col-md-3"></label>
<div class="col-md-9 control-label">
<div class="md-checkbox">
<input asp-for="#Model" class="md-check" />
<label asp-for="#Model">
<span></span>
<span class="check"></span>
<span class="box"></span>
</label>
</div>
<span asp-validation-for="#Model" class="text-danger"></span>
</div>
</div>
In the form in the main razor page where the model contains multiple bool properties.
<form>
...
<partial name="_checkbox" for="BoolPropertyA" />
<partial name="_checkbox" for="BoolPropertyB" />
<partial name="_checkbox" for="BoolPropertyC" />
...
</form>
This doesn't seem to work properly, however. The Label doesn't get any text. Is what I'm trying to do at all possible? If so where am I going wrong?
Here is a working demo:
Partial view(I use string as a model and repalce tag helpers with html code):
#model string
<div class="form-group form-md-checkboxes">
<label for="#Model" class="control-label col-md-3" >#Model</label>
<div class="col-md-9 control-label">
<div class="md-checkbox">
<input id="#Model" name="#Model" class="md-check" />
<label for="#Model">
<span></span>
<span class="check"></span>
<span class="box"></span>
</label>
</div>
<span class="text-danger field-validation-valid" data-valmsg-for="#Model" data-valmsg-replace="true"></span>
</div>
</div>
form:
<form id="form1" method="post" asp-action="Form2">
#await Html.PartialAsync("_checkbox", "BoolPropertyA")
#await Html.PartialAsync("_checkbox", "BoolPropertyA")
#await Html.PartialAsync("_checkbox", "BoolPropertyA")
</form>
result:
As you can see in the picture below, the input tag aligns properly with its label. But the dropdown is not horizontally in the same line as its label; it's a bit upward vertically. Same is true for the checkbox. I would like to see them exactly in the same line as their labels. I'm using ASP.NET Core that comes with latest version of Bootstrap by default. Issue probably is not related to ASP.NET, but just in case, following is the Form in ASP.NET where tag helpers are used. NOTE: The model property Test1 in my ASP.NET model is of type bool and therefore the ASP.NET render <input asp-for="Test1" class="form-control" style="zoom:0.5;" /> as a checkbox. But that, I think, is not relevant here.
<form asp-controller="myController" asp-action="myAction" method="post" class="form-horizontal">
<div class="form-group">
<label asp-for="ProjectTitle" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ProjectTitle" class="form-control" />
<span asp-validation-for="ProjectTitle" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="SelectedProjStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SelectedProjStatus" asp-items="Model.lstProjStatuses"></select>
</div>
</div>
<div class="form-group">
<label asp-for="Test1" class="col-md-2 control-label"></label>
<div class="col-md-1">
<input asp-for="Test1" class="form-control" style="zoom:0.5;" />
<span asp-validation-for="Test1" class="text-danger"></span>
</div>
</div>
</form>
I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.
Code:
Result. But I need the input fields and button next to each other in one row:
I tried using columns... didn't work
You can follow : Display two fields side by side in a Bootstrap Form
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
You can try below code
<div class="container content">
<div class='row'>
<form role="form" class="form-horizontal" method="post">
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search from this date">
</div>
</div>
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search till this date">
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
Back
</div>
</div>
</form>
</div>
</div>
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>