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:
Related
Following the getting started with FAST element guide here, I don't understand why the value of the attribute is not changing whenever I use the element in.
Even when following the guide completely by basically copying and pasting the sample code, I can't make it work.
Based on the code and markup below, I would expect that the h3 element has the value of test and not default.
Anybody who has same issue, or know what I might be doing wrong?
Btw, I'm using esbuild to bundle, transpile and serve the files.
import { FASTElement, customElement, attr, html } from "#microsoft/fast-element";
const template = html`
<div class="header">
<h3>My name is: ${x => x.greeting}</h3>
</div>
<div class="name-tag-body">
<slot>Default slot</slot>
</div>
`;
#customElement({
name: 'name-tag',
template: template
})
export class NameTag extends FASTElement {
#attr greeting: string = "default";
greetingChanged() {
console.log("greeting changed:", this.greeting);
}
connectedCallback() {
super.connectedCallback();
console.log("connectedCallback");
}
} }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<name-tag greeting="something"></name-tag>
</body>
</html>
The solution is to have the target property of the tsconfig.json file set to something other than ESNext. ES2016 works fine.
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.
I have an external CSS file that isn't referenced inside of the html file. Is it possible to add this CSS file and apply the styling to the html via AngleSharp on the fly?
Another work around I've thought of is actually inserting the reference to the CSS in the html before parsing it into the DOM but I wanted to know if AngleSharp provided the initial question before I implemented the "workaround". Thanks so much!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Doc</title>
</head>
<body>
<div id="styleme">
Hello
</div>
</body>
</html>
Notice no css is linked.
And the external css file:
#styleme {
color:blue;
background-color: gray;
}
Yes. There are actually multiple ways.
I guess what you are looking for is:
var config = Configuration.Default.WithCss();
// note: ideally load your document from a URL directly if applicable
var document = await BrowsingContext.New(config)
.OpenAsync(res => res.Content(#"<!doctype html>
<html lang=en>
<head>
<meta charset='utf-8'>
<title>Test Doc</title>
</head>
<body>
<div id=styleme>
Hello
</div>
</body>
</html>"));
var style = document.CreateElement<IHtmlStyleElement>();
// note: if you have the CSS from a URL; choose IHtmlLinkElement instead
style.TextContent = #"#styleme { color:blue; background-color: gray; }";
document.Head.AppendChild(style);
// note: using LINQPad here; you may want to store the style somewhere
document.DefaultView.GetComputedStyle(document.QuerySelector("#styleme")).Dump();
Hope that helps!
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.