I'm using the bootstrap-sass gem and for some reason in the navbar I'm using the active class for one of the li's below, however it doesn't appear pressed down.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= params[:controller].parameterize %>_controller">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<%= link_to 'evoALL', root_path,
html_options = {:class => 'brand'} %>
<% navArr = ["Dashboard", "Help People",
"Get Help", "Contact Us"] %>
<% flash.each do |key, value| %>
<p class="lead"><%= value %></p>
<% end %>
<ul class="nav">
<% navArr.each do |value| %>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<%= yield %>
<div class="container">
<div id="footer"><!-- footer start -->
<div class="row-fluid">
<div class="span12">
<p class="pull-right">
© <%= Date.today.year %>
</p>
</div>
</div>
</div><!-- footer end -->
</div>
</div> <!-- close container div -->
</body>
</html>
index.html.erb for the view file of the index method of the main controller that gets routed to for the root of the application:
<%= provide(:title, 'evoALL') %>
<%= provide(:navActive, 'Get Help') %>
<div class="container">
<div class="row">
<div class="span12">
<p>Needs Home Page</p>
</div>
</div>
</div>
I was applying the active class to the a tag instead of the li tag.
The correct solution would be to replace this:
<% navArr.each do |value| %>
<ul>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
</ul>
<% end %>
with this:
<ul class="nav">
<% navArr.each do |value| %>
<li
<% if (yield(:navActive)==value) %>
class="active"
<% end %>>
<a href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
Related
I started learing ruby and i wanted to create an album page when you can add posts with images. I came across a problem when I add a post it is not aligned, like on bootstrap album example: https://getbootstrap.com/docs/4.5/examples/album/
Look at what i've done https://iv.pl/image/bootstrap.Gt2w3RT
<!DOCTYPE html>
<html>
<head>
<title>AlbumSite</title>
<%= csrf_meta_tags %>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/">
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<section class="jumbotron text-center">
<div class="container">
<h1>Simple album</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
Add a new album
The first page
</p>
</div>
</section>
<div class="postsSection bg-light">
<div class="container col-md-4" >
<div class="postBox">
<%= yield %>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</body>
</html>
<% #posts.each do |post| %> <!-- no %= because this isn an output, tylko przy pokazywaniu zmiennych tego sie uzywa -->
<div class="row">
<div class="card mb-4 shadow-p">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="btn-group">
<div>
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<div class="btn-group">
<div>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
</div>
</div>
</div>
</div>
<% end %>
The row has to go before you go through each post
<div class="row">
<% #posts.each do |post| %>
<div class="col-md-4">
<div class="card">
<div class="card-title">
<%= post.title %>
</div>
</div>
</div>
<% end %>
</div>
I'm building a web app using Rails 5.2 and Bootstrap 4 and I'm having some trouble getting the basic layout in place.
What I'd like is to move the content for each view to the right of the sidebar. i.e. "Your companies".
Can someone help point me in the right direction so that all my views are "inside" the app view i.e below the nav and to the right of the sidebar.
Thank you! :)
Here's how the app looks currently:
Here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
And here is my companies view (the same as the example in the screenshot above).
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% #companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
I am putting together a basic website from One Month Rails and can't seem to figure out how to get the navigation bar to show at the top. I have spent a few hours and would like to go to the community. Here is the code from the _header.html.erb (using bootstrap sass)
<div class="navbar navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<li><%= link_to 'Login', '#' %></li>
</ul>
</div>
</div>
</div>
</div>
Here is the code from the application.html.erb tab:
<!DOCTYPE html>
<html>
<head>
<body>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You seem to have some HTML errors in application.html.erb. But most modern browsers will fix those errors for you when loading the page. Here's a better version:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You should also make sure your _header.html.erb is in app/views/layouts/.
Finally, don't forget to add bootstrap's css file to app/assets/stylesheets/.
My website works well on my mac and iphone but in IE it doesn't. In IE some of the navbar features aren't right (i.e. layout is incorrect, searchbox doesn't have placeholder text, one of the navbar elements (favourites) looks completely different). I'm not sure where the problem lies
layout/application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<link href="../assets/bootstrap-responsive.css" rel="stylesheet">
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
type="text/javascript">
$(document).ready(function() {
$('.collapse').collapse();
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme!", guidelines_path, :class => 'brand' %>
<% end %>
<div class="nav-collapse in collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Organisation", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
</li>
<li >
<%= form_tag guidelines_path, :class => 'navbar-search', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
</div>
<div class="container">
<%= yield %>
</div>
</body>
</html>
I've used twitter bootstrap.
I did add
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
before my but it doesn't seem to make a difference.
First of all Placeholder is not supported till IE9 . But you can use javascript pollyfills to enable the placeholder support, use http://www.modernizr.com/ for that purpose.
I have a home page where I want to display a div in a certain way that it will require to be in the top of the application view.
Div is classed as "HOME-BANNER"
I am attempting to create an IF ELSE statement to reflect hiding the div if it is not on the home page.
My question is how do I call the current page in order to identify it as the home view's index. Also would I end the code or do I place an else statement to continue the rest of the page?
<html>
<head>
<title>WEBSITE</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<% if current_page == "home#index" %>
<div class="HOME-BANNER">
<% end %>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
WEBSITE
<ul class="nav">
<li><%= link_to "All Jobs", jobs_path %></li>
<li><%= link_to "My Profile", tempers_path %></li>
</ul>
<div class="float-right">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i></a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> My Profile</li>
<li class="divider"></li>
<li><i class="icon-th-large"></i> Dashboard</li>
<li><i class="icon-th-list"></i> My Posts</li>
<li><i class="icon-th-list"></i> My Searches</li>
<li><i class="icon-stop"></i> <%= link_to ' Sign out', destroy_user_session_path, :method => :delete %></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
</div>
<div class="footer"></div>
</body>
</html>
You want to do this from your controller. Since this is a localized event, use the controller that specifically hosts this View and not your application controller.
def whatever_view_this_is
#home_banner = true
end
Then in your view :
<% if #home_banner %>
<div class="HOME-BANNER">
<% end %>