I have a code segment in ASP.net MVC2 like this:
<% if (Model.EnrollmentNumber.Equals("Global"))
{ %>
<div id="div1" class="slidingDiv" style="display:none;">
<% }%>
<% else
{ %>
<div id="div1" class="slidingDiv" style="display: inline;">
<%} %>
<%= Html.TextBoxFor(model => model.EnteredEnrollmentNumber)%>
</div>
That's, if Model.EnrollmentNum is "Global", then the div is hidden. Else, the div is visible. But the above code has errors. The compiler says "Element div is missing its closing tag"
How can I fix it?
This is because the compiler doesn't understand the <% if tags, and sees two opening <div for one closing </div>.
You can either just ignore it, or otherwise use the same if statement around your closing tag:
<% if (Model.EnrollmentNumber.Equals("Global"))
{ %>
</div>
<% }%>
<% else
{ %>
</div>
<%} %>
The compiler does not understand that only one of the divs is written. Why not use an asp:Panel instead? In my opinion this is a cleaner solution:
<asp:Panel ID="div1" cssclass="slidingDiv" Visible='<%# !Model.EnrollmentNumber.Equals("Global") %>'>
<%= Html.TextBoxFor(model => model.EnteredEnrollmentNumber)%>
</asp:Panel>
Related
I am attempting to create a messaging page on which the text box will sit on the bottom of the page and the messages will be displayed above it. Here is my code for the page:
<div class="ui">
<% #messages.each do |message| %>
<% if message.body %>
<% user = User.find(message.user_id) %>
<div class="item mt-3">
<div class="list">
<div class="item">
<strong><%= user.first_name %></strong>
<div class="content">
<%= simple_format(message.body) %>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<%= form_for [#conversation, #message], html: {class: "ui reply form"}, remote: true do|f| %>
<%= f.text_area :body, class: "message-box", id: "message-form"%>
<button type="submit", class="send-button", style="display: inline">
<i class="nav-link fa fa-paper-plane"></i>
</button>
<%= f.text_field :user_id, value: current_user.id, type: "hidden" %>
<% end %>
</div>
</div>
The problem is that this code displays like this
The text is running under the text box. My instinct is to place the messages and the text box into two separate boxes and restrict the height of the top one, but I have been attempting this to no avail.
Can anybody suggest how I might be able to get this done?
You should place both in different div's and add 'max-height' to where the text displays.
Also Im assuming this is happening because the text input field is position with position:absolute.
You can make both position:relative and make both display:block. If you want to align the input at the bottom of the screen just use vertical-align
I also think you need to add some custom css styles to the div containing message. Like max-height: 100px and overflow-y: auto;
It would be easier to help you if you could provide fully rendered html instead of a template.
If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron">
<div class="container">
<h1>Values <small>subjective, put here whatever inspires you. </small></h1>
</div>
</div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
<div class="container">
<div class="col-md-9">
<%= yield %>
</div>
<div class="col-md-3">
<% if current_user.present? %>
<%= render 'layouts/sidebar' %>
<% end %>
</div>
</div>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
<p class="text-center">
<%= #jumbotext %> <!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container-fluid">
<div class="container"> <!-- check this too. not sure why you have two containers-->
<div class="col-md-9">
...
Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.
User/Index
<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>
<% #users.each do |user| %>
<div class="user horizontal-align col-md-2">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
<div class="center">
<%= will_paginate #users, renderer: BootstrapPagination::Rails %>
</div>
User CSS
.user {
width: 200px;
display: inline-block;
}
Try the following:
Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
Remove any width definitions in your CSS for .user. Allow width to fall.
Wrap nested columns with .row
jsFiddle: http://jsfiddle.net/zktfu52t/2/
EX:
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<div class="row">
<% #users.each do |user| %>
<div class="horizontal-align col-md-2">
<div class="user">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
try this
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<% #users.each do |user| %>
<div class="user col-md-2 col-lg-2 text-center">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<p><%= link_to user.name, user %></p>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
With this css
.user{
margin:0.2%;
display:block;
}
This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.
Also you have unclosed div tags here:
<div class="panel panel-default">
<div class="panel-heading center">
First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.
To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.
Following the ruby-on-rails tutorial by Micheal Hartl
I've gotten to the sign-up page layout part( 7.22, listing 7.19>> http://www.railstutorial.org/book/sign_up)
But the things is my page displays oddly, the submit button is as wide as the web page not to mention the whole form as well.
I checked the code and it is the same as the book states, the only difference is I changed "$grayLighter" to "$gray-light" as "$grayLighter" I believe is depreciated.
Here is my custom.css.scss
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
Here is my
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="span6 offset3">
<%= form_for(#user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
One of the things I have run into recently is that the CSS is pulled in during the :precompile stage of the build. So when I make CSS changes, I have to remember to build the app, or bounce the host its on so it pulls in any CSS changes during the :precompile.
What I do to test is to put the CSS on the top of the html.erb page in brackets.
This allows me to test the CSS with a simple page refresh on my browser. Once I have that working and I know it looks good. Then I copy that CSS to the relevant CSS file and build it to test it again.
Not sure if this is your issue or not, but I know it messed with me.
In Bootstrap3, span6 offset3 doesn't work.
try this :
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
ASP.NET4
This is my aspx page, which has a css file defining #div1, #div2, #div3 styles, and javascript code to have some dynamic change with divs. My question is in a page, there can't be 2 same ids. So div2 can pass here. What's the best way to work around this? Having a div2a, div2b, and in css file - having #div2a, #div2b using same style? And having javascript to select both div2a, div2b? Please advise.
<form id="form1" runat="server">
<div>
<%if (condition) { %>
<div id="div1"> ... </div>
<%} %>
<%else { %>
<div id="div2"> ... </div>
<%} %>
...
...
<%if (condition) { %>
<div id="div2"> ... </div>
<%} %>
<%else { %>
<div id="div3"> ... </div>
<%} %>
</div>
</form>
You can use "class" attribute to define same style. You can have more elements using the same class attribute value and it's still xhtml valid.