What is the convention for aligning form_for input boxes? The form boxes below stagger with each different title length.
<%= form_for #new_review, url: brand_beans_reviews_path(#bean.id) do |f| %>
User name: <%= f.text_field :user %>
Drinking for: <%= f.text_field :experiance %>
Brew type: <%= f.text_field :brew %>
Caffeine: <%= f.text_field :caffeine %>
Flavor: <%= f.text_field :flavor %>
Overall: <%= f.text_field :rating %>
<%= f.submit %>
<% end %>
I tried using a span on my field titles and setting a width, browser would say its set but would not render the set width.
There isn't one. There are as many ways of displaying a form as there are websites on the Internet, and it's completely up to you to figure out the styling for your own website. Rails imposes absolutely no conventions here.
Pick a front-end framework like Bootstrap or write your own CSS.
I found the answer I was looking for, this was more of a CSS issue I was having. I wasnt sure on how to address the title fields, but the link below used label encapsulate and address CSS to it.
Make text input fields and their labels line up correctly
Related
I have completed a simple view in Rails for login on my website but when I load the page on Safari it automatically displays the Autofil box not under the email field but at the top left corner of the browser window, even overlapping Safari's menu bar.
Here is my login view using Boostrap :
<div class='row'>
<div class='col-md-6 col-md-offset-3'>
<%= form_with(url: login_path, scope: :session, local: true) do |f| %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.submit 'Log in', class: 'btn btn-primary' %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>
When clicking in the email field, it still displays in the corner.
But when clicking on the Autofill button in the email field the Autofill box then appears at its right place, right under the field.
I'm just using bootstrap for styling, no other features here. But jQuery is imported in the project.
I found an old post for what appears to be the same issue, but no answers.
Thanks,
I am using ejs for my template engine. In the .ejs files, it is fine to tab completion with normal html tags. However, I cannot find a way to tab completion for ejs tags such as <% %>``<%= %> etc. How could I make it?
I have this line of code within my .aspx file
<label title="<%= Model.ProductName %>"></label>
why is it when I run it, the label is not showing at all.
yet if I do something like this it would work:
<%: Html.LabelFor(model => model.ProductName) %>
I would really like for the first method to work, is there a way?
thank you
It's because you need to provide contents for this label:
<label title="some title" for="ProductName">
<%: Model.ProductName %>
</label>
The way you wrote your markup the <label> tag is empty. Also make sure you properly HTML encode the contents. Notice in my example the usage of <%: (available only in ASP.NET 4) instead of <%=. If you are running on previous versions you could use the the following:
<label title="some title" for="ProductName">
<%= Html.DisplayFor(x => x.ProductName) %>
</label>
I am using mvc 2.0 with C#.Net
In my view page, I am creating multiple controls with required field validations. to plot my controls, I am using for loop through my mode object which is actually a collection of business object. For my TextBox control which represent 'user comments', I have put validation under it. like
<%:Html.TextBoxFor(model=>model.mycollection[i].Comment %>
<%:Html.ValidationMessageFor(model => model.mycollection[i].comments) %>
There is a sumit button for each row (for each comment textbox) like below
<input runat="Server" name="Button" id="Submit1" type="submit" class="button" value="save comments">
When the form loads, 3 rows are created, each containing a set of text box and a button to submit. This is because the model is a collection of 3 objects. So now I can submit each comments entered by user individually. But the problem is, when I click on any button, instead of validating corresponding textbox for required validation, it validates all of the textboxes on page at a time and gives error message for all of them. How to avoid this kind of behaviour? Mypage has a html.beginform method on top to put everything in a single form and to post the submit to an controller action.
Can you try to put each object from your collection in a separate form like this:
<table>
<% foreach(person in Model.Personlist) { %>
<tr>
<td>
<form>
<%=Html.TextAreaFor(...) %>
<%=Html.ValidationMessageFor(...) %>
<input type="button"......></input>
</form>
</td>
</tr>
<% } %>
</table>
..so then only that form will be validated when you click submit.
Also you can use divs instead of table .
I'm trying to add an extension method to my MVC 2 project without success and after several hours of googling and looking here I'm at a loss. I've created a brand new MVC 2 project to make sure there was not anything weird about my existing project and I'm still facing the same problem. I'm sure this is a situation of I "can't see the forest for the trees" so any help would be greatly appreciated. Here is the code for the extension method.
using System.Web.Mvc;
namespace ExtensionTest.Helper
{
public static class UrlExtensions
{
public static string Image(this UrlHelper helper, string fileName)
{
return helper.Content("~/Content/Images/" + fileName);
}
}
}
and here is the code in the view (standard home index view created by default for a new MVC 2 project)
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%# Import Namespace="ExtensionTest.Helper" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= UrlHelper.Image("test") %>
<h2><%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
</asp:Content>
In design mode, when I type UrlHelper, intellisense does not show my extension method Image and if I run the project I get the following error:
CS0117: 'System.Web.Mvc.UrlHelper' does not contain a definition for 'Image'
At first I thought it was as simple as not adding a reference (Import statement), but that does not appear to be the case. The really weird thing to me is that I can add extension methods to the HtmlHelper object without issue in this same project.
Thanks in advance for any help provided.
Extension methods in .NET should be invoked on an object instance and not on the class itself (even though they are static).
So instead of:
<%= UrlHelper.Image("test") %>
try:
<%= Url.Image("test") %>