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.
Related
I have created an app in ruby on rails and am using bootstrap ,i am using a 2 column layout ,the problem is the post sizes are unequal and an awkward gap ensues which i want to get rid of.
What my index page currently looks like:
What i want my index page to look like:
my index.html.erb
<div class="container">
<% #posts.each_slice(2) do |posts| %>
<div class="posts-wrapper row">
<% posts.each do |post| %>
<div class="col-lg-4 col-md-offset-1">
<%= post.body %>
</div>
<% end %>
</div>
<% end %>
</div>
Move .row out of the loop and it will be fixed
or try the following code this should also work
<div class="container">
<div class="posts-wrapper row">
<% #posts.each do |post| %>
<div class="col-lg-6">
<%= post.body %>
</div>
<% end %>
</div>
</div>
I would have used JQuery Masonry Library
Trying to get my checkboxes to line up horizontally instead of vertically and I'm having no luck here. The checkboxes and labels are stacking up next to each other as opposed to creating a new line each time.
<div class="form-group">
<%= f.label :phases, class: "col-sm-3 control-label" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
My form class is form-horizontal and everything else looks fine.
Any suggestions would be greatly appreciated. Thanks!
Add a checkbox-inline class to the label and you are good to go.
<div class="form-group">
<%= f.label :phases, class: "checkbox-inline" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
From the Bootstrap Wiki
Use the .checkbox-inline or .radio-inline classes on a series of
checkboxes or radios for controls that appear on the same line.
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.
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.