I'm quite the newbie at this, but I'm trying to get the bootstrap datepicker inline mode, but my divs are not showing anything once rendered. perhaps you might know what is wrong with my code?
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href={%static "bootstrap-3.3.2-dist/css/bootstrap.min.css" %}>
<link rel="stylesheet" type="text/css" href="{%static 'css/datepicker.css' %}"/>
<link rel="stylesheet" type="text/css" href={%static "css/main.css"%}>
</head>
<body>
<div id="main">
<div class="datepicker"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> {# jQuery #}
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script> {# Bootstrap #}
<script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker();
});
</script>
</body>
</html>
It works if i use an tag but then it is not in the inline mode.
put the following code to the first line of your template file.
{% load staticfiles %}
and change
<div class="datepicker"></div>
to
<input class="datepicker" />
Related
Here is my views.py file:
from django.shortcuts import render
def page(request):
css = 'temp/css.css'
return render(request, 'temp/index.html', {'css': css})
and templates/temp/index.html file:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static '{{ css|safe }}' %}">
</head>
<body>
Hello Page
</body>
</html>
and static/temp/css.css file:
* {
width: 100vw;
height: 100vh;
background: red;
}
After rendering source of the page is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/%7B%7B%20css%7Csafe%20%7D%7D">
</head>
<body>
Hello Page
</body>
</html>
but I am expecting
...
<link rel="stylesheet" type="text/css" href="/static/temp/css.css">
...
Why it is not working? Is there any way to do this? How to link a static file if the path is provided by the context in html?
Assuming 'css' is your context variable, you should be able to just do the below. Basically drop the quotes around the 'css' variable.
<link rel="stylesheet" href="{% static css %}">
You should add <link rel="stylesheet" type="text/css" href="/static/temp/css.css"> to your index.html directly. That way it will take care of itself and you don't need to pass it as the context.
I have a django project and i have been trying to link a css file to the base.html document to begin implimenting some css to my file. I have bootstrap linked already but i want to add more customization... Here is what i have so far..
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
here is the css file
.blue5 {
background-color: lightblue,
}
You can link a CSS and HTML file like this:
In your HTML code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="pathToYourCSSfile" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Hope this helps.
if your css file only contains these two lines it will be better to include them in the head of the document
<head>
...
<script ...>
<style>
.blue5 {
background-color: lightblue,
}
</style>
</head>
otherwise just like the others css, add a new link tag:
<link href="{% static 'path to your file.css' %}" rel="stylesheet">
This is my HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="/static/js/dashboard.js"></script>
</body>
</html>
The file is located in:
/Simple_flask_app
-hello.py
/static
-js
/styles
-boostrap.min.css
-style.css
I created a simple component just to try to get the CSS to load:
var Dashboard = React.createClass({
render: function(){
return (
<div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
)
ReactDOM.render(<Dashboard />, document.getElementById('content'));
I was trying to get this giant grey box to load - https://getbootstrap.com/examples/navbar/
Do I have to do something special because I'm in React?
Within JSX in React, you must use 'className' instead of 'class'.
So you should change <div class="jumbotron"> to <div className="jumbotron">
Ok, this is a strange one.
I asked a question before about this, but I mistook this for a CSS issue but it appears to be something to do with ui-router / ngRoute (As this was happening before I switched to ui-router).
I was getting an issue with spacing which I mistook for a child margin issue.
So here is my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- Keep the scale and disable zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link href="content/foundation/normalize.min.css" rel="stylesheet" />
<link href="content/foundation/foundation.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/animate.min.css" rel="stylesheet" />
<link href="content/angular-toastr.min.css" rel="stylesheet" />
<link href="content/core.min.css" rel="stylesheet" />
<script src="scripts/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="test" metro>
<div>
<nav class="top-bar" role="navigation">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home">Test site</a></h1>
</li>
</ul>
<section class="profile right" profile></section>
</nav>
</div>
<section class="page" ui-view></section>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-cookies.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/mm-foundation-tpls-0.5.1.js"></script>
<script src="scripts/angular-toastr.tpls.js"></script>
<script src="app/app.js"></script>
<script src="app/common/common.js"></script>
<script src="app/common/api/handler.js"></script>
<script src="app/common/models/models.js"></script>
<script src="app/common/options/options.js"></script>
<script src="app/components/components.js"></script>
<script src="app/components/metro/metro.js"></script>
<script src="app/components/tiles/tiles.js"></script>
<script src="app/components/profile/profile.js"></script>
<script src="app/components/draggable/draggable.js"></script>
<script src="app/components/loadingButton/loadingButton.js"></script>
<script src="app/components/backgroundSwitcher/backgroundSwitcher.js"></script>
<script src="app/home/home.js"></script>
<script src="app/error/error.js"></script>
<script src="app/account/account.js"></script>
<script src="app/account/stock/stock.js"></script>
<script src="app/security/security.js"></script>
<script src="app/security/profile/profile.js"></script>
<script src="app/customerServices/customerServices.js"></script>
<script src="app/customerServices/viewOrder/viewOrder.js"></script>
</body>
</html>
I commented out all the css file and was still getting the issue. The spacing problem appears between the ui-view and the child page.
An example of a child page is this:
<div class="row slide-in-right">
<section class="tile-column large-2 columns" id="{{ container.id }}" ng-repeat="container in controller.menu" tile-column>
<h1 class="column-title">{{ container.name }}</h1>
<a class="tile box-shadow {{ tile.classes }}" id="{{ tile.id }}" ui-sref="{{ tile.action }}" ng-repeat="tile in container.tiles" coloured-tile="{{ tile.colour }}" tile>
<i class="fa {{ tile.icon }}"></i>
<span class="title">{{ tile.name }}</span>
</a>
</section>
</div>
I tried removing all the HTML (except one div inside the ui-view) using chrome developer tools and the problem still remained.
If I look at the dev tools, I can see this:
As you can see, the highlight bit shows the space that seems to be included.
If I edit the HTML I can see this:
If I remove that red dot, the spacing issue goes away.
I have no idea what is causing it.
Does anyone else?
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps