I have followed https://django-tables2.readthedocs.io/en/latest/pages/tutorial.html to create a table. I have managed to rezise the table:
python version: 3.5.2
django version: 1.11.2
tables.py:
import django_tables2 as tables
from .models import Person
class PersonTable(tables.Table):
class Meta:
model = Person
attrs = {'class': 'paleblue','width':'300%'}
people.html:
{% load render_table from django_tables2 %}
{% load static %}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="{% static 'django_tables2/them/paleblue/css/screen.css' %}" />
</head>
<body>
{% render_table table %}
</body>
</html>
I cannot see any option to change the size of bottom border in the docs ?
Alternatively I have tried to change screen.css to remove the borders, but changes has no effect. The link is active when I click view page source even if I rename screen.css.
You should resize the container around the table and the pagination, which for the default template has class table-container.
You should use some CSS to make that container wider, something like
<style>
.table-container {
width: 300%;
}
</style>
You should remove the width attribute from the table definition, as it will make the table 3 times as wide as the container.
Related
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like not all styles were loaded,
Please try enter to login into adminarea by url :
https://bi-currencies.my-demo-apps.tk/admin/currencies
credentials are in Login form
and pages looks like : https://prnt.sc/TCjBh0SefUMO 4
But if to refresh page with “CTRL+R” pages looks ok, in dark mode.
Any ideas why so and how that can be fixed?
More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0").
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )
I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home
I see this problem of other browsers of my Kubuntu 20 too.
Maybe problem is that that I use too different templates, but actually I use different layouts, so in
app/Http/Middleware/HandleInertiaRequests.php :
public function rootView(Request $request)
{
if ($request->segment(1) == 'user') {
return 'layouts/user';
}
if ($request->segment(1) == 'admin') {
return 'layouts/adminlte'; // TODO
}
return 'layouts/frontend'; // Current request is front-end
}
This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght#300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Styles -->
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link rel="stylesheet" href="/css/theme.css">
<script src="/vendors/#popperjs/popper.min.js"></script>
<script src="/vendors/bootstrap/bootstrap.min.js"></script>
<script src="/vendors/is/is.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="/vendors/fontawesome/all.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
and admin template resources/views/layouts/adminlte.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Styles -->
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/css/fontawesome_all.min.css">
<link rel="stylesheet" href="/css/adminlte.min.css">
<link rel="stylesheet" href="/css/admin_custom.css">
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="/js/Chart.bundle.js"></script>
<script src="/js/OverlayScrollbars.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
1 common resources/js/app.js :
require('./bootstrap');
window.Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
require('#fortawesome/fontawesome-free/js/all.min.js');
// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import mitt from 'mitt';
window.emitter = mitt();
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
import Multiselect from '#vueform/multiselect'
import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";
const app = createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('inertia-link', Link)
.component('Paginate', Paginate)
.component('file-upload', VueUploadComponent)
.mixin({ methods: { route } })
.component('multiselect', Multiselect)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :
\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');
but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?
Thanks!
Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.
Reason (problem):
As you have used one layout for frontend-pages (public pages) and other one for admin-pages.
So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.
But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.
I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.
Solution:
Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:
<a :href="route('home')">
Home
</a>
By this way appropriate layout style-script got loaded.
My Assumption:
Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.
I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.
Attach CSS sheet
<link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
Attach JavaScript/jQuery scripts
<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
After using asset() method, your links in site-source-code (Ctrl+U)
looks something like that:
Note:
make sure you must set appropriate APP_URL in .env file.
In a flask project, using BeautifulSoup I am using the following front-end design from codepen.io
https://codepen.io/drehimself/pen/QNXpyp
in my html template. I have a web scraped list of images and want to display them instead of the existing image using jinja2.
Notice that the images are contained in the CSS.
.clash-card__image {
position: relative;
height: 230px;
margin-bottom: 35px;
border-top-left-radius: $border-radius-size;
border-top-right-radius: $border-radius-size;
}
.clash-card__image--barbarian {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
img {
width: 400px;
position: absolute;
top: -65px;
left: -70px;
}
}
Up until now, I have managed to use jinja2 to display images in the html or body part of the template.
As the images are in the CSS, I have tried this, but it doesn't work.
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{images");
{% endfor %}
I have tried various iterations of the above, but can't get the image to display. I can however, get the TITLE to display because it is in the html.
The other problem is that the list is not fixed in size. I want the cards to replicate without my having to put in the {{image}} jinja reference in each css reference.
My question is: How do I correctly put the jinja2 reference to the image in the list of images in the css?
Any best practices and suggestions also appreciated.
I hope my example meets your requirements. I think if you define the background images directly in the element you will save yourself a lot of trouble.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- All resources from Clash of Clans Cards -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<link rel="stylesheet" href="{{ url_for('static', filename='main.css')}}" />
<!-- End of resources from Clash of Clans Cards -->
<style type="text/css">
.clash-card__image {
background-color: #1e1e1f;
background-size: contain; /*cover or contains; decide for yourself*/
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="slide-container">
{% for image,title in images_titles %}
<div class="wrapper">
<div class="clash-card" style="padding-bottom: 3.5rem;">
<div class="clash-card__image" style="background-image: url({{image}});">
</div>
<div class="clash-card__unit-description">
{{ title }}
</div>
</div>
</div>
{% endfor %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
(function() {
var slideContainer = $('.slide-container');
slideContainer.slick();
$('.clash-card__image img').hide();
$('.slick-active').find('.clash-card img').fadeIn(200);
// On before slide change
slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-active').find('.clash-card img').fadeOut(1000);
});
// On after slide change
slideContainer.on('afterChange', function(event, slick, currentSlide) {
$('.slick-active').find('.clash-card img').fadeIn(200);
});
})();
</script>
</body>
</html>
I'm guessing you may be trying to use Jinja expressions in a CSS file which is included as a static asset (via a tag like <link href='/some/file.css />).
This won't work as these external assets are never processed by Jinja.
A quick workaround for this may be to keep this in the HTML template by including it in the <head> as follows:
<head>
<link rel='stylesheet' type='text/css'>
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{image}}");
}
{% endfor %}
</link>
</head>
EDIT:
what is the best practice for this as surely it is something that is often required
CSS files are, by their nature, static. Modern methods of static asset deployment may put those assets on a CDN (or if using a reverse proxy like nginx have the static folder served by nginx, so the WSGI/app server doesn't even know about them).
With that in mind, this template probably isn't built with dynamic image URLs in mind. On a closer inspection it appears that it's only loading a background image within the CSS, and the actual character image is loaded within an <img> tag. So you're probably looking at two ways in which images are loaded within this template.
Since you're asking about the background image, you could change it with Javascript. Something like:
var elem = document.getElementsByClassName('clash-card__image--barbarian')[0];
elem.style.backgroundImage = "url('http://localhost:5000/some_image.jpg')"
You could then, for example use the fetch API to load the URL string dynamically from an endpoint whtin your app. This probably involves some more Javascript work, which is difficult to expand on within the context of this question.
Without Javascript, if you're placing that character image with Jinja2 syntax, perhaps doing something like:
<div class="clash-card__image clash-card__image--archer">
<img src="{{image}}" />
</div>
You could avoid putting the CSS block in the <head> by modifying that parent div to load the CSS via a style tag:
<div style="background: url('{{bg_image}}');"
class="clash-card__image clash-card__image--archer">
then remove that declaration from the external CSS file.
This has the same effect as placing the CSS within the <head> in the template file: it's all rendered by Jinja2 on page load.
The following piece of code works well in bokeh version 1.0.4, that is to say my RadioButtonGroup is well cut into several lines, but it is doesn't work in version 1.1.0: all Buttons are on the same line and outside of the 500 width!!!!
I do some trial with various sizing mode but without any effect on the automatic cut into several line
from bokeh.models.widgets import RadioButtonGroup
output_file('ulk.html')
buttongroup = RadioButtonGroup(labels=["Option {:d}".format(i+1) for i in range(100)])
save(widgetbox(buttongroup,height=500,width=500))
Thank you by advance for your help
A temporary work-around would be to apply a custom styles using the bokeh server directory-structure like this one below. Run your code using: bokeh serve --show myapp
directory structure:
myapp
|
+---main.py
+---templates
+---index.html
+---styles.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</body>
</html>
styles.css
.bk .bk-btn-group
{
display: inline;
}
.bk .bk-btn
{
height: 25px;
width:70px;
}
Result:
I can't fins any information on how to define css or javascript files in a view like:
class MyView(View):
....
class Media:
css = { 'all' : 'mystyle.css' }
If you have a form you can do like:
class MyForm(ModelForm):
....
class Media:
css = { 'all' : 'mystyle.css' }
And then in the template you can print the files like;
{{ form.media.css }}
I like that Syntax very much and I like to keep the View-specific css files in the app-directory.
Does anyone know if it's possible?
Thanks!
I imagine you should be able to set a variable with the css filename/location in your view, and if you pass that variable to the render/response you should be able to access it in your template.
Take a look at https://docs.djangoproject.com/en/dev/ref/templates/api/#variables-and-lookups
example:
def my_view(request):
stylesheet = {"css": "my_view.css"}
return render(request, 'myapp/templatename.html', stylesheet,
content_type="application/xhtml+xml")
and them templatename.html would be
<link rel="stylesheet" type="text/css"
href="{{ MEDIA_URL }}{{ stylesheet["css"] }}" media="screen"/>
I'm using Jekyll for my blog, and I'd like the ability to use unique CSS styling in particular posts. Right now, I'm specifying a CSS file in the YAML frontmatter like so:
style: artdirection.css
and using it in the layout like this:
{% if page.style %}
<link rel="stylesheet" href="{{ page.style }}">
{% endif %}`
This works, but I'd prefer to include the actual CSS styling in a style tag in the page's frontmatter instead of linking to a style sheet.
I've tried dealing with this in a couple of ways, including the method described here, but the variable that I capture is only usable inside the post itself, not in the layout.
So, is it possible?
I'm pretty sure this would work:
---
title: xxx
style: |
/* You can put any CSS here */
/* Just indent it with two spaces */
/* And don't forget the | after "style: " */
h2 {
color: red;
}
---
Your markdown/textile goes here. h2s will be red
And then in your layout:
<style type="text/css">
{{ page.style }}
</style>
And that should be it.
Jekyll 3 breaking change
Now variables declared in the layout front-matter (_layouts/default.html) are visible via:
{{ layout.style }}
instead of the older:
{{ page.style }}
https://github.com/jekyll/jekyll/issues/4123