Content getting cut off width wise and height wise. Also not being scrollable.

[Roopaish]

The content is getting cut off at the bottom.

The table is not fully visible width wise and is not scrollable.

[Roopaish]

The table is not fully visible width wise and is not scrollable.

Fixed it by wrapping the table in a div with style overflow:scroll; Don't know about the height issue.

[syngetprog]

Hi...Thanks for sharing that info. I'm using Dart/Flutter and I'm facing the same issue with content getting cut off (width). Did you use Dart and how did you create the div, using the TeXView widget?

[Roopaish]

@syngetprog I think I am late here. It's not a good way but I found that it rendered correctly when I hot reloaded. So I called setState 😂. And it's fixed lol.

Here's the code snippet (I would not recommend it though it worked)

class ContentRenderer extends StatefulWidget {
  final List<String>? texts;
  const ContentRenderer({Key? key, this.texts}) : super(key: key);

  @override
  State<ContentRenderer> createState() => _ContentRendererState();
}

class _ContentRendererState extends State<ContentRenderer> {
  String newContent = '';
  bool placeholder = true;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        if (placeholder) SizedBox(height: Get.height),
        TeXView(
          renderingEngine: const TeXViewRenderingEngine.katex(),
          child: TeXViewColumn(
            style: TeXViewStyle(
              contentColor: Colors.black,
              fontStyle: TeXViewFontStyle(
                fontSize: 18,
                fontFamily: GoogleFonts.inter().fontFamily,
                fontWeight: TeXViewFontWeight.w400,
              ),
            ),
            children: [
              ...widget.texts!.map((text) {
                return TeXViewDocument("${formatText(text)} $newContent");
              }),
            ],
          ),
          onRenderFinished: (_) {
            setState(() {
              newContent = '<br/><br/>';
              placeholder = false;
            });
          },
        ),
      ],
    );
  }
}