I have a project that i am working on. I have a navbar at the top and in the navbar i have a dropdown menu that does not work. I've been ignoring the problem for a while but now i need things in the dropdown menu. I have been slowly taking things out of my project trying to find the cause. I am now at a point where i have replaced my navbar, (located in my header file) with the bootstrap demo one.
This is my _header.html.erb (pretty much the same as bootstrap, except for the head tag)
<head>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
This is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all","data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true%>
<%= javascript_include_tag "http://localhost:9292/faye.js"%>
<%= javascript_include_tag "autocomplete-rails.js" %>
<%= include_gon %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<div class="container" style = "width: 100%; padding: 0px">
<%= render 'layouts/header' %>
</div>
</body>
</html>
The page loads but when i click on "dropdown" nothing happens. I'm stumped, does anyone have any ideas?? I have also been disecting my code looking for syntax errors and haven't found any. Since i am still getting the same error with bootstraps code it seems unlikely that a syntax error is the cause.
Just looked at your partial _header.hml.erb and noticed your have a head tag inside it. You should remove it.
If you look at your application.html.erb layout you already have a head tag there and you are rendering that _header.html.erb partial inside your body tag.
You have
<%= javascript_include_tag "application", "data-turbolinks-track" => true%>
which links your javascript to assets/javascript/application.js. If you need to write any javascript in your project then that is the place to write it or you could make any new js file inside assets/javascript and then require that file inside your application.js file
You should remove this
<head>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
from your partial and instead simply write in your application.js:
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
I have used on function used to incorporate for turbolinks
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 would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!
Bootstrap provides the following code to use as a navbar. However, when I simply paste in their code without altering it, the collapsed view doesn't work. As you resize your browser window towards more narrow, the navbar turns into a button that you can click to show all the nav components again. However, it doesn't seem to be working when I simply paste in their code. Anyone know why? The nav components do get collapsed, but clicking the button to show them doesn't do anything.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
HTML
<?php include('config/setup.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search Hound</title>
<!--This enables the website to be mobile first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/js.php'); ?>
<?php include('config/css.php'); ?>
</head>
<body>
<?php include('template/navigation.php'); ?>
<div class="container">
<form class="form-inline" align="center">
<!-- Section to type question-->
<div class="form-group" style="display:block">
<textarea class="form-control" style="width:100%" rows="5"></textarea>
</div>
<!--Section to add money-->
<div class="input-group" id="AddMoney">
<span class="input-group-addon">$</span>
<input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)' aria-label="Amount (in dollars and cents)">
</div>
<!--Section to add file-->
<div id="AddFile">
Add File
<input type="file" id="uploadFile" style="visibility: hidden;" />
</div>
<div id="imagePreview"></div>
<!--Section for the Submit button-->
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- /container -->
<div
</body>
<?php include('template/footer.php'); ?>
</html>
config/js.php
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I don't see that you are including jQuery before the bootstrap.js file. jQuery is required to use bootstrap javascript components.
Add this BEFORE bootstrap.js in your config/js.php file.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If I understand your question correctly, here is what you want:
Jquery:
$(".navbar-toggle").click(function(){
$(".navbar").slideToggle();
});
http://jsfiddle.net/xz06armf/
I am trying to get started with Twitter Bootstrap, but for some reason, anything I do, results in a div spanning the entire page. As such, I cannot get the grid system / navigation bar to look right as every div appears to have it's own line.
I am sure that this is a simple fix but I am completely baffled.
http://jsfiddle.net/Aq5xn/show/
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#section('title')
Page Title
#show
</title>
{{-- Ensures proper rendering & touch zooming --}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}}
{{ HTML::style('/css/bootstrap.css') }}
{{ HTML::style('/css/style.css') }}
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">asdf</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">{{-- #yield('content') --}}</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
</div>
</div>
{{-- Scripts are placed here --}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }}
</body>
</html>
You are confusing Bootstrap 2.3.2 with Bootstrap 3.0.0. you can find the differences outlined in the CHANGELOG concerning the migration details. Glancing at your code, i see that navbar-inner class has been removed, container-fluid has been replaced by container, same for row-fluid and so on.
Basically, you're using Bootstrap 2.3.2 code with the new Bootstrap 3.0.0 engine... without migration. Follow the instructions outlined in the above link to know what you need to change and how.
PS: As of version 3.1 you can still use .container-fluid, you just need to use .row classes as with standard containers. Probably this was still the case even with version 3.0, I may have misunderstood the documentation.
Please do note that you are using Bootstrap 3.0.0.
span class is no longer in use. Changed to .col-md-* , read the details at the link below.
http://getbootstrap.com/css/#grid-options
if you still wish to use span class. Please revert it back to Bootstrap 2.3.2.
try this in bootstrap 3 http://getbootstrap.com:
<nav class="navbar navbar-inverse shadow main-menu" 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>
<a class="navbar-brand">asdf</a>
</div>
<div style="height: auto;" class="navbar-collapse navbar-ex1-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>