When running my Rails (Blog) app, I can't get my banner image to display.
My files are as follows (the page show without error just no image):
application.js
//* require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .
application.scss
#import "bootstrap";
#import "navbar";
_post.html.erb
<div class='col-sm-6 col-lg-4'>
<div class="card">
<div class="card-topper" style='background-image:
url(https://static.pexels.com/photos/113762/pexels-photo-113762-
large.jpeg);'>
</div>
<div class="card-block">
<h4 class="card-title"><%= link_to post.title, post %></h4>
<p class="published-date">published Jan 14, 2016</p>
<p class="card-text"><%= truncate(post.description, lenght: 130)
%></p>
<%= link_to 'Read', post, class: 'btn btn-read' %>
</div>
</div>
</div>
The issue is not related to rails. The image background will appear once you have content in your DIV. if you don't have content inside the DIV, better use <img /> tag.
Reference:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
Image tag:
https://www.w3schools.com/html/html_images.asp
Related
Issue 1: My navbar toggle menu will not close, but will open, unless I remove either of the following from my layout:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Now, when i remove this the toggle works and will open and close. Although, my sign-in modal will not function without it.
or:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Issue 2:
I have accordions that will not work on first load - but will then work once the page has been reloaded.
My navbar in summary:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav navbar-right">
#more nav items code here
<li class="nav-item-2 nav-display-2">
<button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn2">Sign Up/Login</button>
<div class="modal fade" id="SignInModal2" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
</script>
accordion code:
<a class="collapsed card-link text-center" id="edit-accordion" data-toggle="collapse" href="#collapseFIRST">
</a>
<div id="collapseFIRST" class="collapse" data-parent="#accordion">
<div class="card-body">
</div>
</div>
application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require Chart.bundle
//= require chartkick
Is there any you see standing out in my code wrong?
You can try this in your script. It is explained here
$( document ).on('turbolinks:load', function() {
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
Add the bootstrap gem to your Gemfile and remove the html tag from the layout
Gemifle
gem 'bootstrap', '~> 4.3.1'
You should not have 2 versions of jQuery.
Then run bundle install
Then change this to:
/= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .
Also in hour applications.scss you should have
#import "bootstrap";
Also in layout try instead:
<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
i am using bootstrap modal i want to list employee details on my pop but thats not working properly.
index.html.erb
<a href="#" data-toggle="modal" data-target="#myModal-<%= current_user.id %>">
<%= image_tag("view.png",:size=>"30x30") %></a></td>
</tr>
<div class="modal fade" id="myModal-<%= current_user.id %>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-body">
<strong>RollID:</strong>
<%= current_user.roll_id %>
</div>
application.html.erb
<title>EmployeeManagementSystem</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css' %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" %>
<%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"%>
<%= yield %>
application.js
//= require activestorage
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require popper
//= require_tree .
gem file https://imgur.com/a/RxWpe8v
please tell any mistake in my code.have another way to implement modal tel me.
Thanks Advance
You need to include bootstrap components or bootstrap-sprockets.js to your app/assets/javascripts/application.js file. As bootstrap depends on jquery i'd put after jquery.
//= require jquery
//= require bootstrap-sprockets
Although I tried the code below, these contents are arranged in tandem like this;
side1
.
.
.
contents from yield
.
.
.
side2
How can I display like this?
side1... contents from yield... side2
On the other hand, class="table table-striped" works, for example.
I have been tried to modify the source created by others.
It would be appreciated if you could give me where I should check.
application.html.erb
<div class="container">
<div class="row">
<div class="col-sm-3">side1</div>
<div class="col-sm-6">
<div><%= notice %></div>
<div><%= alert %></div>
<%= yield %>
</div>
<div class="col-sm-3">side2</div>
</div>
</div>
Although I tried col-xs, I found the same result.
custom.css.scss
#import "bootstrap";
Gemfile
gem 'bootstrap-sass', '2.3.2.0'
application.css
*= require_tree .
*= require_self
Can you check if custom.css.scss has been added to application.css.scss and that application.css is loaded in the layout page?
EDIT:
According to this for the bootstrap version: bootstrap docs, perhaps you should use <div class="span4"></div> syntax.
I am struggling getting a simple modal dialog to display in my rails app. Here are the relevant files...
Gemfile
group :assets do
...
gem 'bootstrap-sass-rails'
...
end
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require "bootstrap"
//= require "bootstrap/modal"
//= require_tree .
app/assets/stylesheets/application.css
#import "bootstrap";
#import "bootstrap/modal";
app/views/tasks/index.html.erb
<%= link_to 'Modal', new_task_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
...
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
app/views/tasks/_new.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
app/views/tasks/new.js.erb
$("#modal-window").html("<%= escape_javascript(render 'new') %>");
So this is just a simple app with a single model that I am trying to get my feet wet with. Right now the link will respond. The page fades, but I am not getting any content.
I've spent the last week messing around off and on trying to get this working wihtout much luck. Thanks in advance for any help.
You need to call modal() on $("#modal-window"). Update app/view/tasks/new.js.erb as:
$("#modal-window").html("<%= escape_javascript(render 'new') %>").modal()
I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.
Does somebody have the solution for me ?
PS : I currently use Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. the 1.jpg is enough!
Does your app/assets/javascripts/application.js contain a reference to bootstrap?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/pictures/1.png">
</div>
<div class="item">
<img src="/pictures/2.png">
</div>
<div class="item">
<img src="/pictures/3.png">
</div>
<div class="item">
<img src="/pictures/4.png">
</div>
<div class="item">
<img src="/pictures/WordcloudInsight.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working
check above link, also did you add this + is jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>