I have a problem with the content of my application page in rails,I basically cannot put any content after the <% yield %> tag.
My problem is that when I put a footer underneath the <% yield %> it shows up over the yield content, not bellow. I am sure there is a simple solution for this but I just cannot get it to work as I would like to.
I anyone have an idea of were the problem could be would be really helpful.
<body>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to (image_tag("logo.png", class:"food-image")), root_path%>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="sections"><%= link_to 'Dishes', posts_path %></li>
<li class="sections"><%= link_to 'Events', posts_path %></li>
<li class="sections"><%= link_to "About", about_path %></li>
<ul class="social-icons">
<li class="fa fa-twitter fa-2x"></li>
<li class="fa fa-facebook fa-2x"></li>
<li class="fa fa-instagram fa-2x"></li>
<li class="fa fa-pinterest fa-2x"></li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<% if current_page?(root_path) %>
<div class="image-header">
</div>
<% end %>
<div class="anchor">
</div>
<%= yield %>
<footer>
<div class="container-fluid" id="logs">
<div class="login-buttons">
<% if user_signed_in? %>
<button><%= link_to "New Post", new_post_path , class:"sing_in"%></button>
<button><%= link_to("Logout", destroy_user_session_path, :method => :delete, class:"sing_in") %></button>
<% else %>
<button><%= link_to("Login", new_user_session_path, class:"sing_in") %></button>
<% end %>
</div>
<p>lnjkbhjghfxgdzfxgchvjbknl</p>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
</div><!-- container-fluid-->
</footer>
Thanks in advance
This sounds like a CSS problem. If there's a float in the yield somewhere, you could need to clear it. Immediately after the yield and before footer, insert a spacer ...
<div style="clear:both"> </div>
Hopefully that puts you on the right track.
Related
I am learning Bootstrap and am trying to implement it within a Ruby on Rails projects I have. I am using the bootstrap navbar and am trying to integrate that with rails. I have a search bar that I am trying to make responsive. I want the width of the search form to fill up the available space, and shrink/grow as the screen size changes. The navbar in bootstrap already has a lot of CSS styles applied to it and I feel like trying to add a feature like this to an existing navbar is difficult.
Here is the code for my form...
application.html.erb
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #228822;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- overriding to HTTP GET because turbolinks causes issues with pagination infinite scroll -->
<%=link_to "The Pragmatic Bookshelf", store_index_path, :class => "navbar-brand", method: :get, style: "color:#bbffbb" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to t('.questions'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.news'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.contact'), store_index_path, style: "color:#bbffbb" %></li>
</ul>
<form class="navbar-form navbar-left">
<div id="search_bar" >
<%= form_tag(store_index_path, method: :get) do %>
<div class="search_bar_text">
<%= text_field_tag :search, '', id: 'search_bar_text' %>
</div>
<div class="search_bar_image">
<%= image_submit_tag 'search.png', id: 'search_bar_image'%>
</div>
<% end %>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu">
<% if session[:user_id] %>
<li><%= link_to "Orders", orders_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Products", products_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Users", users_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", logout_path, method: :delete%></li>
<% else %>
<li><%= link_to "Login", login_path%></li>
<% end %>
</ul>
</li>
<li class="dropdown">
Language <span class="caret"></span>
<ul class="dropdown-menu">
<% LANGUAGES.each do |language|%>
<li><%= link_to language[0].to_s, store_index_url(locale: language[1]) %></li>
<% end %>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I got most of this code from an example in the bootstrap documentation and have been implementing some erb into it to integrate it with my Rails project. The form class="navbar-form navbar-left" is where the search bar starts. The behavior I want is for this to fill up the remaining space between the unordered lists to the right and left and adjust its size based on the current screen size.
I have experimented with display flex and flex-grow, floating, & overflow. Cant seem to get anything working. I wont include my CSS file since its only some font/color changes, most of the CSS is from bootstrap anyways.
Any help/guidance is appreciated :)
I'll ask the dumb question... do you have the following in your < head > section?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
without it, Bootstrap won't be responsive.
Bootstrap includes a grid system. Maybe you can use this to define the width of the search field.
The grid system divides the width into 12 columns. So you could use for example:
.col-sm-12 .col-lg-4
You can play around with the values.
I am learning about ruby-on-rails , and setting up a user based web page . At the moment I am trying to add a default bootstrap navbar , but the right side button , which should be the button to the About page is not showing
I have tried to add the class="active" tu the where the about button is , but still no success
<!DOCTYPE html>
<html>
<head>
<title>Saasapp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,700,800" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-
turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-
track': 'reload' %>
<nav class="navbar navbar-default navbar-static-top"
role="navigation">
<div class='container'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
DevMatch
</div>
<div class="collapse navbar-collapse" id="main-nav-
collapse">
<ul class="nav navbar-nav navbar-right ">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
It is showing (as a regular link) on my test page.
If you want it to be a button add classes btn btn-default:
<li><a class="btn btn-default" href="/about">About</a></li>
or in the Rails' way:
<li><%= link_to 'About', about_path, class: 'btn btn-default' %></li>
I am facing a problem which is hard to explain in words but i will try my best.
Problem: Adding a modal in the header to my rails application makes other links disabled which are situated beside it until the modal is accessed.
Example: |Home| Mail |Settings(Modal Link)|
Above example is how my header looks and above mentioned three are links.
Until i access Settings modal, Home and Mail links remain disabled. But once i view Modal, i can access Home and Mail again.
When i used Chrome developer tools (Inspect Element), i could see that the Modal is hiding on top of those two Home and Mail links. After accessing Settings(Modal Link), There is no hidden Modal on top of those links and can be accessed.
Any inputs on it ?
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">
<%= image_tag 'logos/logo.png' %>
<%= image_tag 'logos/tagline.png' %>
</a>
<%= render 'shared/search' %>
<ul class="nav pull-right">
<% if !user_signed_in? %>
<li><%= link_to 'Join Us', new_user_registration_path %></li>
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to "Facebook", '#' %></li> <!-- user_omniauth_authorize_path(:facebook)-->
<% else %>
<li><%= link_to "Home", root_path %></li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle notifySymbol" data-toggle="dropdown" href="#">
<%= notifyCount %>
</a>
<div class="dropdown-menu" style="max-height:450px; width:370px; overflow:auto">
<%= notify %>
</div>
</li>
<%end%>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<%= image_tag "#{#group.group_pic}", :size => '25x25', :class => "img-rounded" %>
<%= #group.group_name %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <%= link_to raw('<i class="icon-eye-open"></i> Edit Profile'), edit_profile_path %></li>
<li> <%= link_to raw('<i class="icon-edit"></i> Edit Settings'), edit_settings_path %></li>
<li> <%= list_groups %> </li>
<li class="divider"></li>
<li> <%= link_to raw('<i class="fa fa-user"></i> Admin Tasks'), '#', :data => {:toggle => 'modal', :target => '#myAdminModal'} %> </li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="myAdminModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> <i class="fa fa-tasks"> Admin Tasks</i> </h4>
</div>
<div class="modal-body">
<div class="tree" >
<ul>
<li>
<span class="badge badge-success"> <i class="fa fa-smile-o"> Send </i></span>
<ul>
<li>
<%= link_to "All Group", send_all_groups_path %>
</li>
<li>
<%= link_to "Selected Members", '#' %>
</li>
</ul>
</li>
<li>
<span class="badge badge-success"><i class="fa fa-envelope-square"> Send Messages</i> </span>
<ul>
<li>
<%= link_to "All Group", '#' %>
</li>
<li>
<%= link_to "Selected Members", '#' %>
</li>
</ul>
</li>
<li>
<span class="badge badge-warning"><i class="fa fa-paper-plane"> Send Group Invites </i> </span>
<ul>
<li>
<%= link_to "To Member", '#' %>
</li>
<li>
<%= link_to "To Non-Member", '#' %>
</li>
<li>
<%= link_to "Check Invite Status", '#' %>
</li>
</ul>
</div>
</div>
<div class="modal-footer" data-dismiss="modal" aria-hidden="true">
<p class = "btn btn-info" > Close </p>
</div>
</div>
</div>
</div>
I made a Navbar with Bootstrap 3. My questions is how to have it be shaded when selected?
Everything works fine otherwise. I believe it required some JavaScript, but I don't know how to implement it.
This is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family:Webdings;">
<%= link_to "lalala", root_path, class: 'navbar-brand' %>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "laaa", lal_path %></li>
<li class="dropdown">
lala<b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "lala", laa_path %></li>
<li><%= link_to "lalala", lala_path %></li>
<li><%= link_to "lalala", lala_path %></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Follow #lalala
</li>
<li>
<div class="fb-like" data-href="lalala" data-width="600" data-layout="button_count" data-show-faces="true" data-send="false"></div>
</li>
<li><%= link_to "lala", contact_path %></li>
<li><%= link_to "lalalala", register_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS3 is all you need! Go here: http://css3generator.com/. After you generate the shadow, gradient or text shadow you like, apply that css3 chunk of code to the element by adding :active selector. See here for :active selector: http://www.w3schools.com/cssref/sel_active.asp
NB: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
how can i join the ruby code with the html code? I want that the html "href" link with the path (ruby). Could somebody help me? For example: <li class="active">Home</li> , the href linked to Ruby <%= link_to "Home", root_path %> .
Ill want that my Button Home, for example is linked with the Ruby root_path.
HTML Code
> <div class="navbar 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>
> <a class="brand" href="#">My Workingtimes</a>
> <div class="nav-collapse">
> <ul class="nav">
> <li class="active">Home</li>
> <li>Log In</li>
> <li>Sign In</li>
> </ul>
> </div><!--/.nav-collapse -->
> </div>
> </div>
> </div>
RUBY CODE
<div id="container">
<div id="content">
<% if flash[:notice] %>
<p id="notice">
<%= flash[:notice] %>
</p>
<% end %>
<% if flash[:alert] %>
<p id= "alert">
<%= flash[:alert] %>
</p>
<% end %>
</div>
<div id="footer">
<%= link_to "Home", root_path %> |
<%= link_to "Sign In", new_user_path %> |
<% if user_signed_in? %>
<%= link_to "Logout", logout_path, method: :delete %> |
<%= link_to "My Workingtimes", mytimes_path %>
<% else %>
<%= link_to "Login", login_path %>
<% end %>
<%= yield %>
</div>
</div>
You can run rake routes and see what, for instance, root_path points to.
Unless you haven't made any changes, it probably points to /, in which case you can have href = "/"
This is assuming that you absolutely need to enter the path name in the HTML. Otherwise, I would highly recommend converting your .html to .html.erb and then use something like <%= link_to "Home", root_path %> as you had mentioned.