How to show the Text box layout in MVC as text box without having drop down in the side?
In the attached screen shot, we have the drop down lay out. It has to be plain text box.
<div class="form-group">
<div class="col-sm-5 control-label">
<label class="hthin">ExceriseTimes</label>
</div>
<div class="col-sm-1">
<textarea id="ExceriseTimes" asp-for="ExceriseTimes" style="height:25px;" class="form-control" type="text"></textarea>
</div>
</div>
The <textarea> form element doesn't have type attribute, it belongs to <input>. If you want a plain single-line text box, just use <input> tag with type="text" attribute:
<input id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
type="text" />
However if you want fixed size <textarea> element without scroll bar (looks like spinner in sample image), use both CSS styling overflow:hidden & resize:none:
<textarea id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
style="overflow:hidden;resize:none"></textarea>
Note: You can apply additional CSS class containing both styles above (e.g. noscrollbar) and append it like class="form-control noscrollbar".
Related
For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below).
When implementing the same input with a matSuffix for a trailing icon, the extra margin is no longer there.
Any idea how to get rid of it?
Below an example of the used code:
<mat-form-field fxFlex appearance="outline">
<mat-label>Quota</mat-label>
<mat-icon matPrefix>pin</mat-icon>
<input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>
You can try wrapping your code with a div.row and a div.col-2 as shown below.
<div class="row">
<div class="col-2">
enter your code here
</div>
</div>
I'm making a form in React native.
A field in this form in (non-native) React would be like this:
<div>
<label htmlFor="lastName">Last Name:</label>
<input type="text" id="lastName" />
</div>
Or in plain html:
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName">
</div>
I find the label tag important for accessibility reasons.
Every tutorial I found uses only placeholders and I couldn't find any reference for <label> in the react native documentation.
The placeholder disappears as the user starts typing, which makes the page less accessible.
The <label> tag also has the advantage of directing focus to the input in case it is clicked.
This means a click on <label htmlFor="lastName">Last Name:</label> prompts the user to input in the field <input type="text" id="lastName" />.
For this reason using <Text> tag as a <label> is not ideal.
You can use <View> as your <div> and <Text> as your <label>.
<input> is <TextInput>
then you just have to style the elements to your needs.
I create one Method in MVC 4.0 which taking the Request.Form (Namevaluecollection) in Form. I faced below issue in checkbox and radio button.
I added dynamically checkbox or radio button with below code, and I set the form value collection as "NameValueCollection formsCollection = Request.Form" in one of my controller method but that checkbox or radio button is not coming in "formsCollection.AllKeys" while other control like text box, text area, dropdown will work properly.
<form>
<div class="divLeft div1" id="div83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<div class="control-group">
<label class="control-label">Checkbox 2</label>
<div class="controls">
<div id="cfCheckbox">
<label>Option 1</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<label>Option2</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
</div>
</div>
</div>
</div>
</form>
You're having id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" on both check-boxes and the main div. IDs in HTML are supposed to be unique.
Remove the IDs on the checkboxes. This should fix your problem.
FormsCollection uses Name for binding, not ID. So you don't really need your elements to have IDs.
I am getting up to speed with Bootstrap's grid system but the following example confuses me. In the following there are two (2) column classes - col-xs-5 and col-lg-1 - for each div with class form-group
<div class="container-fluid">
<form role="form">
<div class="row">
<div class="form-group col-xs-5 col-lg-1">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5 col-lg-1 ">
<label>
Email
</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
</form>
</div>
Can someone explain why this is done?
Each column class describes how many columns the element will take up at that designated breakpoint. For example:
<div class="form-group col-xs-5 col-lg-1 ">...</div>
This element will take up 5 columns if the page is being rendered at the xs breakpoint (screen width of <768px) but will only take up one column at the lg breakpoint ( >1200px )
This lets you set the presentation of the same element at different screen widths.
For each row you have one column.
It's set to five columns wide for extra small to medium screen sizes with by "col-xs-5" and one column for large screen sizes with "col-lg-1". By default with bootstrap you can set four different layouts (extra small, small, medium and large) to suit different screen sizes.
If you make your browser window size smaller you will see how it effects it.
See http://getbootstrap.com/css/#grid for information on how the grid system works.
It's well worth reading though the documentation as it's very good. See http://getbootstrap.com/css/
I'm using WinJS (JavaScript) to create a Windows 8 app.
I wish to make a container, either a DIv or something else, that I can put content in to and can be used for scrolling by touch.
I've looked at flex box, but that appears to be just for Internet Explorer?
Am I missing something?
This is my markup so far, I want to make the wrapper scrollable
<div id="wrapper">
<div class="login_box">
<form method="post">
<label class="login_label">Username:</label>
<input type="text" class="login_input" name="login_username" />
<label class="login_label">Password:</label>
<input type="password" class="login_input" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
Is this done via CSS?
For WinJS, you can add the .win-scrollview class to your wrapper div and then use the overflow-x and overflow-y css properties to control scrolling behavior.