Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical Align <p> with inner <code> span #1241

Open
dargoz opened this issue Mar 16, 2023 · 4 comments
Open

Vertical Align <p> with inner <code> span #1241

dargoz opened this issue Mar 16, 2023 · 4 comments
Labels
more-info-needed More information is needed to resolve the issue. Will be closed if no response is received. question

Comments

@dargoz
Copy link

dargoz commented Mar 16, 2023

How do I make this <p> content have the same height with <code>
image

i want to make the text center so it will look like this :
image

i use flutter_html: ^2.2.1

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.0, on Microsoft Windows [Version 10.0.22621.1413], locale en-ID)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.5.0)
[√] IntelliJ IDEA Community Edition (version 2022.3)
[√] VS Code (version 1.76.1)
[√] Connected device (3 available)
[√] HTTP Host Availability

is there anything I can do to achieve it? thanks.

@Sub6Resources
Copy link
Owner

What sort of styles do you have applied? That would give us a hint as to where the issue is.

@Sub6Resources Sub6Resources added more-info-needed More information is needed to resolve the issue. Will be closed if no response is received. in-triage Issue's that I've seen but haven't had a chance to thoroughly review and/or categorize labels May 9, 2023
@Sub6Resources Sub6Resources removed the in-triage Issue's that I've seen but haven't had a chance to thoroughly review and/or categorize label May 18, 2023
@Sub6Resources Sub6Resources added this to the Priority Goals milestone May 18, 2023
@dargoz
Copy link
Author

dargoz commented May 28, 2023

sorry for the late reply.., I use custom render to override the normal <code> style and create something like this:
I already changes to TagExtension (3.0.0-beta1)

TagExtension(
          tagsToExtend: {"code"},
          builder: (extensionContext) {
            return CustomCodeRender(renderContext: extensionContext);
          },
        ),

and here's in the build method :

return Container(
          width: isMultiLine
              ? MediaQueryData.fromWindow(WidgetsBinding.instance.window)
                  .size
                  .width
              : null,
          padding: const EdgeInsets.all(2),
          decoration: BoxDecoration(
              color: const Color.fromARGB(255, 240, 240, 240),
              border: isMultiLine ? Border.all(color: Colors.grey) : null,
              borderRadius: const BorderRadius.all(Radius.circular(4))),
          child: Padding(
            padding: isMultiLine ? const EdgeInsets.all(8) : EdgeInsets.zero,
            child: Text(
              codeText,
              style: TextStyle(
                  fontSize: isMultiLine ? 14 : 12, fontFamily: 'JetBrainsMono'),
            ),
          ));

but I don't find anyway to make it center...

@EArminjon
Copy link

Hello, Did you find any solution ?

@dargoz
Copy link
Author

dargoz commented Jul 23, 2024

nope, I'm currently working on something else and since it's just minor issue, i'm not using my time to troubeshoot it 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
more-info-needed More information is needed to resolve the issue. Will be closed if no response is received. question
Projects
Status: Todo
Development

No branches or pull requests

3 participants