i'm a newbie, so please help ;-)
I build a small RoR web application where i'm trying to use the twitter bootstrap.js framework.
i got almost everything to work but showing the icons which should be coming glyphicons-halflings-white.png or glyphicons-halflings.png .
my folders structure is pretty simple, the standard RoR project, where i put the png files under /app/assets/images/, and when i take a look on the bootstrap.css files i see:
background-image: url("../images/glyphicons-halflings-white.png");
and
background-image: url("../images/glyphicons-halflings.png");
which should be correct according to my folder structure.
In my html code i have something like that:
<div class="btn-group">
<button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
where i use the <i class="icon-tag"></i> to show a tag icon (or hope to see it)
Though, nothing is working
for unknown reason, i can't see any icons on my folder. i was trying to see if i can see the png files if i simple copy the ../images/glyphicons-halflings.png to the browser address url, though, i get "No route matches [GET] "/images/glyphicons-halflings.png" when the url points to: localhost:3000/images/glyphicons-halflings.png
my html response looks like this:
<!DOCTYPE html>
<html>
<head>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.1.8.20.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.extentions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/select2.js?body=1" type="text/javascript"></script>
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="c+czIHCNmepmx674gKldijipFRD9348Gw+R2SAlrpow=" name="csrf-token" />
<link rel="SHORTCUT ICON" href="/images/favicon.ico">
</head>
<body>
<script src="/assets/jquery.validate.js?body=1" type="text/javascript"></script>
<script src="/assets/jit-yc.js?body=1" type="text/javascript"></script>
<script src="/assets/graphcontrol.js?body=1" type="text/javascript"></script>
<script src="/assets/excanvas.js?body=1" type="text/javascript"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="/assets/excanvas.js"></script><![endif]-->
<h1>Sandbox#hello</h1>
<div class="btn-group">
<button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
Am i doing anything wrong? do i need to force ruby to deploy those *.png files correctly?
Any advise would be helpful.
I had a similar problem so i did this:
<i class="icon-shopping-cart glyphw" id="cart"></i>
css
.glyphw{
background-image: url(/assets/glyphicons-halflings-white.png);
}
Just use the closely-maintained bootstrap-sass gem (https://github.com/thomas-mcdonald/bootstrap-sass) to save all headaches.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v=3.0.1');
src: url('fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
just set your font directory correctly in font-awesome.css
Solution I use for these kind of issues (where vendor scripts try to find assets in /img,
/images is to redirect those request to assets folder. In routes.rb add:
get '/img/:name', to: redirect {|params, req| "/assets/#{params[:name]}.#{params[:format]}" }
I use Twitter bootstrap to my projects and it's awesome. The syntax to get an icon is:
<i class="icon icon-tag"></i>
The first CSS class "icon" is to make a tag like an icon and the second class "icon-tag" is to show the icon image.
Related
I'm integrating summernote-bs5 in my software. I include it from cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I initialize summernote area using default. Html:
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.
</textarea>
</div>
js:
$('.summernote').summernote();
It doesn't work. I tried also with jsfiddle with bootstrap last version and it seems not work. jsfiddle
I just did this as a basic test and it worked for me. Are you adding everything in the correct order and are you waiting for the document to be loaded to initialise your summernote div?
$(document).ready(function() {
$('.summernote').summernote();
});
<!DOCTYPE html>
<html lang="en">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.</textarea>
</div>
</html>
I've implementet a bootstrap 3.0 theme in my MVC-aplication. But the theme only works on my http://localhost:00000/. If I type in the browser like:
http://localhost:00000/home/index
or something like that the css and javascript doesn't work. But I get the html för it. All my code for like the: head, header, footer ect.. I have in my _Layout.cshtml file. I can't see the problem here why it's not working?
It ONLY works on my http://localhost:00000/.
NOT on the: http://localhost:00000/home/index (witch points to the exact same (controller/method/view as the fisrt one)
This is how my _layout.cshtml looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!--admintemat test-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="assets/jvector-map/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<link href="css/clndr.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<!--header start-->
<header class="header fixed-top clearfix">
<!--logo start-->
<div class="brand">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<div class="sidebar-toggle-box">
<div class="fa fa-bars"></div>
</div>
</div>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification goes here -->
</div>
<div class="top-nav clearfix">
<!--search & user info goes here-->
</div>
</header>
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
</aside>
<!--sidebar end-->
<!-- sidebar menu end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--main content goes here-->
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</section>
</section>
<!--main content end-->
#*</div>*#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- ADMINTEMAT TESTPlaced js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="js/lib/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script src="js/accordion-menu/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.js" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot- chart/excanvas.min.js"></script><![endif]-->
<script src="assets/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="assets/skycons/skycons.js"></script>
<script src="assets/jquery.scrollTo/jquery.scrollTo.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/calendar/clndr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"> </script>
<script src="assets/calendar/moment-2.2.1.js"></script>
<script src="js/calendar/evnt.calendar.init.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-us-lcc-en.js"></script>
<script src="assets/gauge/gauge.js"></script>
<script src="assets/easypiechart/jquery.easypiechart.js"></script>
<script src="assets/sparkline/jquery.sparkline.js"></script>
<script src="assets/flot-chart/jquery.flot.js"></script>
<script src="assets/flot-chart/jquery.flot.tooltip.min.js"></script>
<!--<script src="assets/flot-chart/jquery.flot.pie.js"></script>-->
<script src="assets/flot-chart/jquery.flot.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.pie.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.animator.min.js"></script>
<script src="js/dashboard.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<!--ADMIN TEMAT TESTscript for this page-->
</body>
</html>
If you open your console, you'll see several 404 errors for each of your css assets and probably afew of your js assets. This is because you're using relative file paths. relative file paths look within the folder of the current file, therefore once you're viewing a file in a sub folder, the relative paths no longer target the correct files. To fix it, use an absolute url.
/css/bootstrap-reset.css
the rest will need to be updated too.
I can't get a dropdown working, inside navbar using twitter bootstrap, I have:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <b class="caret"></b></a>
<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><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar-inner -->
</div><!--/.navbar -->
and the javascript in included in the head has follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
...
So jquery is being included before bootstrap.js, what I'm missing ? what I'm doing wrong ?
Edit:
I've cleaned my application.js so now the head looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application.js?body=1" type="text/javascript"></script>
...
And now appears a white triangle pointing up, that wasn't appearing before, but doesn't appear the whole dropdown...
Check your Markup in an isolated environment: http://jsfiddle.net/handtrix/9992A/ (looks good)
Maybe you should include the Javascript files at the bottom of the page.
Did you use Scaffolding ($ rails g controller ...)? If yes remember that the rails scaffold generators often add css files that will screw your bootstrap css. Try to remove them.
Clear the Cache of your Browser
The problem turns out to be some twitter bootstrap modals that I was using in my layouts like this:
<div class="modal fade" id="modal_terms">
Instead of that I've changed to:
<div class="modal hide" id="modal_terms">
And it's all working properly now, I hope this helps someone else
I tried a test file which is working but this file isn't. I also tried validating from w3c and it showed no errors. I also tried pasting
outside jquery ui tabs but still didn't worked out. Could there be any conflict between plugins. And also when i gave absolute path for demo file it worked while relative path didn't. Here's the two file:
This one is working (demo file)-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- optional -->
<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
</head>
<body>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
Where as this original ones isn't working-
<!DOCTYPE html>
<head>
<title>Rahul Dagli's Portfolio Website</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery-main.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--lightview-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<script type="text/javascript" src="js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--CSS-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/navigation-menu.css" >
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
<link rel="Stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
</head>
<body>
<!--main navigation-->
<nav>
<ul id="navigation">
<li class="portfolio"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
</nav>
<!--main content-->
<div id="sections">
<!--Portfolio page starts-->
<section id="section-portfolio">
<header>
<hgroup>
<h1>Rahul Dagli</h1>
<h2> Web Designer</h2>
</hgroup>
<p>Welcome to my online portfolio. Take a look at my work and find out who I am.</p>
</header>
<!--Tabbed Image Gallery-->
<div id="portfolio-list">
<div id="tabs" class="tabs-bottom">
<ul>
<li>Graphic design</li>
<li>Web design</li>
<li>Flash</li>
<li>3d</li>
</ul>
<div id="tabs-1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</section>
<!--Portfolio page ends-->
<!--About page starts-->
<section id="section-about">
</section>
<!--About page ends-->
<!--Contact page starts-->
<section id="section-contact">
</section>
<!--Contact page ends-->
</div>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs-colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
There's an example folder in the download you could use to start from, it shows a proper installation. Once that works, Lightview should work in the tabs as well.
Also keep in mind that all the Lightview related includes on your page are absolute, not relative like your other includes. So it could be that the files aren't where you expect them to be.
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css"/>
<script>
$(document).ready(function() {
$("#TextBox1").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
Should I be linking any other css files? Or is it a problem with Google CDN?
you are using <script> for css instead of <link>
EDIT:
and rel="stylesheet" is missing
Still cant figure out how to do it with external CSS. A faster solution was to keep the CSS files local.