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,
Related
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).
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
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 have a ASP.NET MVC2 application with a master page. The master page renders the site layout divs as follows:
<div id="wrapper">
<div id="column1">
{contentplaceholder}
</div>
<div id="column2">
{contentplaceholder}
</div>
</div>
In my View, I would like to apply a classname to the wrapper div, so when viewing the homepage, the wrapper div would be:
<div id="wrapper" class="homepage">
</div>
or on the contact page it would be
<div id="wrapper" class="contact">
</div>
Ideally I would like to set this variable in the view aspx page, rather than in a controller action. What would be the cleanest way to achieve this? I was thinking something along the lines of:
In Master page:
<div id="wrapper" class="<%=WRAPPER_CLASS%>">
</div>
and then in View:
<% WRAPPER_CLASS = "contact"; %>
(obviously the above example doesn't work, but does anyone have any good ideas?)
Why not try this, within the master page:
<div id="wrapper" class="<asp:ContentPlaceHolder ID="page-class" runat="server" />">
</div>
and in the aspx view
<asp:Content ID="page-class-content" ContentPlaceHolderID="page-class" runat="server">
homepage
</asp:Content>