Giter VIP home page Giter VIP logo

Comments (4)

FlipperPA avatar FlipperPA commented on August 14, 2024

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.

goetzk avatar goetzk commented on August 14, 2024

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.

FlipperPA avatar FlipperPA commented on August 14, 2024

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.

FlipperPA avatar FlipperPA commented on August 14, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.