I have strange error with images (never encountered it before).
This is screenshot of the main page - <%= render 'layouts/header %>
Nothing wrong there...
Now - I have put same code (<%= render 'layouts/header %>) into devise/sessions/new.html.erb and it does not read logos anymore.
(same happens with footer)
-> How to fix this?
-> How to prevent it in future?
I thought that rails will always load images the same way it does every time.
header.html.erb
<header id="home">
<div class="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="index.html">
<h1><img class="img-responsive" src="assets/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
</ul>
</div>
</div>
</div><!--/#main-nav-->
Fixed
Problem was that I should have used image_tag instead of standard html img src.
So:
This:
<img class="img-responsive" src="assets/logo.png" alt="logo">
Should be changed to this:
<%= image_tag("logo.png") %>
Related
I have a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
The collapsed navbar for mobile versions will not open. The website is www.insaka.org. This is the navbar code. I could have sworn it was working last time I checked it, but now it is not. Any ideas?
<div class="container">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<%= render 'layouts/navigation_links' %>
<% render 'layouts/nav_links_for_auth' %>
</ul>
<div>
Donate
</div>
<div>
<img class="featurette-image img-fluid mx-auto img-responsive max-width:25px height:auto" src="../images/blue insaka logo.jpg">
</div>
</div>
</nav>
If you check for javascript errors in the console you will find the problems:
popper.min.js
bootstrap.min.js
holder.min.js
These three js files could not be found.
I am trying to add a header to the spree commerce website using deface. But the problem is logo is not getting loaded. I have tried the following ..
I have pasted the logo.png file in app/assets/images and in the config/initilazers/spree.rb
I have added config.logo = 'logo.png' in the block existing there.
This was not working, so I added logo.png in the vendor/assets/images.(I created the images folder)
This is the code I am having
Deface::Override.new(:virtual_path => 'spree/shared/_header',
:name => 'Tryint to replace the header',
:replace => 'div#spree-header',
:text => '
<div class="container">
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>BIRTHDAY</li>
<li>ANNIVERSARY</li>
<li>WEDDING</li>
<li>CHRISTMAS</li>
<li>CORPORATES</li>
<li>STORE</li>
</ul>
</div>
</div>
</nav>
</div>
'
)
The above code file is present in the overrides/update_header.rb. It works fine except the logo does not show
I was using img tag in html, instead of using image_tag as in rails way. And it should be like this <%= image_tag("rails.png") %> where rails.png is in app/assets/images
I want to have a navbar that collapses when I resize the screen, so I thought to use Bootstrap.
In the application.html.erb:
<body>
<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="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>
In the Gemfile I have gem 'bootstrap-sass'
In the application.css.scss I wrote #import 'bootstrap;'
In the application.js I have //= require bootstrap
I don't understand why It doesn't work, I just copied from the bootstrap site
Your imports are correct, but your current markup is not. It doesn't match the markup and classes that I see in some of the examples. I first attempted to build from your markup while using the sticky footer with fixed navbar example in the bootstrap docs as a guide to get the markup to display properly. Here's how I adjusted your markup:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="#">Some Store</a>
</div> <!-- end div class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div> <!-- end div class="collapse navbar-collapse" -->
</div> <!-- end div class="container" -->
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->
If you look closely, I swapped the locations of the divs with classes container and navbar-inner and changed the class to <div class="navbar-header"> that surrounds the collapse button. Then I had to change div surrounding the menu items to have class navbar-collapse instead of the nav-collapse that you had, otherwise the menu items disappear. In order for the button to work, I changed it from an <a> tag to a <button> tag as well as the data-target="navbar-collapse" attribute to correctly target the collapsible menu items. Once these changes were made, I had a functioning drop-down menu for window sizes < 768px.
And don't forget to add a style to your <body> tag for padding-top:51px; to guarantee your site content appears underneath the fixed navigation bar.
Hope that helps!
Chris
Please check your application.html.erb file in the header section add this
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
I have the following snippet. I am unable to toggle the data values in smaller resolution though the button appears on the scree. No data has been displayed when I click on toggle button.
<div class="container">
<nav class="navbar navbar-default" 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-headerdata-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-headerdata-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About Us</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Can someone help resolving the issue?
Thanks
This was just because of improper linking of bootstrap JS.!