I have this in a HAML layout (layout.haml)
- #fonts.each do |font|
%link{:href=>"//fonts.googleapis.com/css?family={font}",:rel=>"stylesheet",:type=>"text/css"}
And I have this in the HAML template index.html.haml
- #fonts = ['Lato:400,300,100','Droid+Serif:700,400'];
When I compile, I get this:
<link href='//fonts.googleapis.com/css?family={font}' rel='stylesheet' type='text/css' />
<link href='//fonts.googleapis.com/css?family={font}' rel='stylesheet' type='text/css' />
What am I doing wrong?
You forgot the hash symbol.
- #fonts.each do |font|
%link{:href=>"//fonts.googleapis.com/css?family=#{font}",:rel=>"stylesheet",:type=>"text/css"}
^ here
Related
I would like to sort table using tablesorter with expectation like the attached fiddle
https://jsfiddle.net/saranya2020/ykn035rf/6/
Table sorts but the problem is my first column has an href link when only when +icon clicked it should expand. But after applying the below script tags for sorting,when i click up or down arrow my href automatically expands:( and during page load is get error,
Uncaught TypeError: Cannot read property 'themes' of undefined
#line: $.extend($.tablesorter.themes.jui, {
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css"/>
<link rel="stylesheet" href=" https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../css/theme.jui.min.css"/>
Please let me know what i have missed or added wrong to avoid this problem.
I want to implement a date picker in one of my text input page. I have a page call panel.blade.php and app.blade.php which is the layout page. Since Laravel comes with bootstrap and jquery installed, I did the usual import to include the necessary files to make it work.Below is the code.
app.blade.php:
<head>
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
.
.
.
.
.
.
<script>
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
panel.blade.php:
<tr>
<td>454542</td>
<td><input class="date form-control" type="text"></td>
<td>Chair</td>
<td>Received</td>
<td>xxxx</td>
</tr>
The problem is when I click on the textbox, it's supposed to pop out the date picker UI but nothing came out. I spent some time trying to figure out what went wrong but to no avail. Anyone can point out what went wrong?
Appreciate it.
The problem is that you are assuming that Laravel includes Bootstrap and jquery, but I don't see it in a fresh install. (Are you using a template maybe?)
Put this lines in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
And it should works perfectly ;)
EDIT:
Try putting the jquery import before the bootstrap datepicker import:
app.blade.php
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
EDIT2:
To change the format you can also try to add a property to the input field:
<input class="date form-control" data-date-format="mm/dd/yyyy">
Hope it works flawlessly!
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
I have a validator problem:
Bad value http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter for attribute href on element link: Illegal character in query: not a URL code point.
But I have the follow code, no spaces anywhere:
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter/" rel="stylesheet" type="text/css">
in the link href change | by %7C
There are 2 ways to fix this validation problem:
URL encode the | (vertical bar/line) character in the href attribute of the link element (as %7C) :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800%7CVarela+Round%7CArchitects+Daughter" rel="stylesheet" type="text/css">
Separate fonts inclusion with multiple link elements :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css">
Avoid illegal characters such as empty space. For example, instead of <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter One" /> use <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter+One" />.
I am focused on the wrong layer of abstraction here, but can't figure out where.
I have this file views/pages/overview.html.erb
<%= stylesheet_link_tag "cust/coderay"%>
<h1>Overview</h1>
<hr>
Here's my code test:
<%= html = CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table)%>
<hr>
Back <%=link_to "home", "home"%>.
<hr>
It took <%="%.3f" %(Time.now-#start_time)%> seconds to generate this page.
To my surprise, the pages renders like so:
When I view source on the page I get:
<!DOCTYPE html>
<html>
<head>
<title>Dash</title>
<link href="/assets/application-all.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/all/pages.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/pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="SydEiDhSNHuEE6vCfr4rajIksxBbqnm89sddC08msjs=" name="csrf-token" />
</head>
<body>
<h1>Overview</h1>
<hr>
Here's my code test:
<table class="CodeRay"><tr>
<td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>
</pre></td>
<td class="code"><pre>puts <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Hello, world!</span><span style="color:#710">'</span></span></pre></td>
</tr></table>
<hr>
Back home.
<hr>
It took 0.006 seconds to generate this page.
</body>
</html>
Why is the bracketed css displaying as inline text? What should my usage of coderay look like here?
Many thanks -
Rails escapes your HTML by default in ERB templates. You need to turn off HTML escaping like so:
<%=raw CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table) %>
See more at this question and these release notes.