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

Always left aligned #75

Closed
MTRNord opened this issue Mar 25, 2019 · 7 comments
Closed

Always left aligned #75

MTRNord opened this issue Mar 25, 2019 · 7 comments

Comments

@MTRNord
Copy link

@MTRNord MTRNord commented Mar 25, 2019

Hi I have this simple HTML Widget:

Html(
    data: "<b>Test</b>,
);

This gets put into this:

Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[
        Container(
            margin: const EdgeInsets.all(3.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
                boxShadow: [
                    BoxShadow(
                        blurRadius: .5,
                        spreadRadius: 1.0,
                        color: Colors.black.withOpacity(.12))
                ],
                color: Color(0xfffaffe8),
                borderRadius:  BorderRadius.only(
                    topLeft: Radius.circular(5.0),
                    bottomLeft: Radius.circular(5.0),
                    bottomRight: Radius.circular(10.0),
                ),
            ),
            child: Stack(
                children: <Widget>[
                    Html(
                        data: "<b>Test</b>,
                    ),
                    Positioned(
                        bottom: 0.0,
                        right: 0.0,
                        child: Text(
                            time,
                            style: TextStyle(
                                color: Colors.black38,
                                fontSize: 10.0,
                            ),
                        ),
                    )
                ],
            ),
        )
    ],
);

The Problem is no matter what I do the Text of the HTML Widget is on the left side expanding the whole bubble :/

Is there any possible fix for this?

@The-Redhat

This comment has been minimized.

Copy link
Contributor

@The-Redhat The-Redhat commented Mar 25, 2019

Hey a screenshot of what you expect to see would be nice. Is there a specific reason to use a Stack ? Since you are probably only showing a short html text without images or stuff like that you might consider parsing the text with https://pub.dartlang.org/packages/html and displaying it in a Text Widget. You can then use parse('<p>Test</p>').body.text

@MTRNord

This comment has been minimized.

Copy link
Author

@MTRNord MTRNord commented Mar 25, 2019

Hi the full actual implementation Looks like this (blured for brand and privacy reasons):

grafik

And yes Images would be shown differently. The main reason for using this is to display formatting that the proto sends (it is Markdown send as HTML).

If your suggestion does support formatting I indeed think thats better.

The stack is simply because I am new to flutter and that was on my first try the easiest way to get the date at the correct position. That actually might be getting replaced.

@The-Redhat

This comment has been minimized.

Copy link
Contributor

@The-Redhat The-Redhat commented Mar 25, 2019

Thanks for the screenshot, this makes it way clearer. The proposed doesn't support styling. Since the library uses a Column or Wrap I think @Sub6Resources must implement an option to set mainAxisSize to min.

@MTRNord

This comment has been minimized.

Copy link
Author

@MTRNord MTRNord commented Mar 26, 2019

@The-Redhat well by styling I mean things like bold, italic and the Supported Tags that are more special than normal text :) (sorry for using the wrong words.)
But an ability to Set mainAxisSize to min would be awesome

@Sub6Resources

This comment has been minimized.

Copy link
Owner

@Sub6Resources Sub6Resources commented Mar 26, 2019

@MTRNord I'll work on adding the ability to set mainAxisSize to min as I have time. Thanks for submitting an issue!

@nvbln

This comment has been minimized.

Copy link

@nvbln nvbln commented May 4, 2019

Hi, is this still being worked on? :)

nvbln added a commit to nvbln/flutter_html that referenced this issue May 8, 2019
Defaults to true to make it a non-breaking change.
Fixes Sub6Resources#75.
@Sub6Resources Sub6Resources added this to the Next Version milestone May 14, 2019
@Sub6Resources Sub6Resources modified the milestones: Next Version, 0.11.0 Jul 17, 2019
@HDHunter

This comment has been minimized.

Copy link

@HDHunter HDHunter commented Aug 4, 2019

image

I also have this issue . alway align left . How I make it align center.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

5 participants
You can’t perform that action at this time.