Comments (4)
Howdy! Thanks for the ticket. Could you include the code for the StreamField
you're using this in so I can try to reproduce it? Actually, for the entire Page
model you're using? I'm trying to figure out if the field above the CodeBlock
might be doing something funky with the CSS as well (where is says 'Running tests')? We may need to look at the entire HTML source of the page to see if there's a missing closing </div>
or something liek that as well. It basically looks like something in your browser is pushing the entire width of the main content entire to be really, really wide.
Here's an example of a StreamBlock
with a CodeBlock
inside:
https://github.com/FlipperPA/wagtailcontentstream/blob/master/wagtailcontentstream/blocks.py#L37
from wagtailcodeblock.
You're right, that would have been smart to include :|
The diff showing what I added when setting up the field:
diff --git a/blog/models.py b/blog/models.py
index 08fa2f9..141c1f2 100644
--- a/blog/models.py
+++ b/blog/models.py
@@ -20,6 +20,8 @@ from wagtail.wagtailsnippets.models import register_snippet
from wagtail.wagtailsnippets.edit_handlers import SnippetChooserPanel
from django.utils.encoding import python_2_unicode_compatible
+# https://github.com/FlipperPA/wagtailcodeblock
+from wagtailcodeblock.blocks import CodeBlock
from modelcluster.fields import ParentalKey
from modelcluster.contrib.taggit import ClusterTaggableManager
@@ -112,6 +114,8 @@ class BlogPage(Page):
body = StreamField([
('heading', blocks.CharBlock(classname="full title")),
('paragraph', blocks.RichTextBlock()),
+ ('raw_html', blocks.RawHTMLBlock()),
+ ('code_block', CodeBlock()),
('image', ImageChooserBlock()),
('file', DocumentChooserBlock()),
])
diff --git a/karlsblog/settings/base.py b/karlsblog/settings/base.py
index fb761a4..f2cb9ab 100644
--- a/karlsblog/settings/base.py
+++ b/karlsblog/settings/base.py
@@ -52,6 +52,7 @@ INSTALLED_APPS = [
'django.contrib.staticfiles',
'blog',
+ 'wagtailcodeblock',
]
MIDDLEWARE = [
And my full page model:
class BlogPage(Page):
body = StreamField([
('heading', blocks.CharBlock(classname="full title")),
('paragraph', blocks.RichTextBlock()),
('raw_html', blocks.RawHTMLBlock()),
('code_block', CodeBlock()),
('image', ImageChooserBlock()),
('file', DocumentChooserBlock()),
])
content_panels = Page.content_panels + [
StreamFieldPanel('body'),
]
I have just commented out raw_html and I still see the same behaviour so it is less likely to be caused by that block.
thanks,
kk
from wagtailcodeblock.
Just an update, I'm busy doing work getting packages ready for Wagtail 2.0, but will have some time to look at this soon. Apologies for the delay.
from wagtailcodeblock.
I finally got some time to look at this, and I think I may know what's going on. The line in your screen shot starting with api_xml = "...."
is causing the div containing the code block to get pushed to the right, as it doesn't do a line break so the code can be copied.
I think the solution here is to make that div scrollable. I'll take a look into it. Thanks for the report!
from wagtailcodeblock.
Related Issues (20)
- Package future with Draftail. HOT 8
- Wagtail React Streamfield Support HOT 3
- PrismJS extremely slow HOT 1
- Replacing a theme HOT 4
- Does it support coderedCMS? HOT 1
- Problem with the code label HOT 2
- Disable line numbering ? HOT 3
- no issues
- Admin Clientside Error - Wagtail Release >= 2.13 HOT 1
- Try using rows instead of the JavaScript hack. HOT 1
- The line numbering and the syntax highlighter doesn't work properly. HOT 14
- Wagtailcodeblock is broken in wagtail 4.2.
- MultiValueDictKeyError in Wagtail 4.2 HOT 3
- 404's for some non existent CDNJS files HOT 2
- Need some hints for wagtail 5 Compatibility HOT 6
- Remvove depreciated warning insert_editor_css HOT 2
- difficult to override styles HOT 5
- Add setup/install instructions to README HOT 1
- Allow more options for using prismjs HOT 12
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wagtailcodeblock.