Coder Social home page Coder Social logo

TOC overlaying wide content about shfb HOT 4 OPEN

glenncarr avatar glenncarr commented on July 29, 2024
TOC overlaying wide content

from shfb.

Comments (4)

EWSoftware avatar EWSoftware commented on July 29, 2024

I'm not seeing that behavior. The divs create columns and the content is typically restricted to the width of each column (TOC on the left, content in the middle, and In This Article on the right). Can you provide an example that shows the behavior you are seeing?

from shfb.

glenncarr avatar glenncarr commented on July 29, 2024

Here's an example project:
https://github.com/glenncarr/shfb-toc-1047

Here's what I'm seeing:
https://github.com/glenncarr/shfb-toc-1047/blob/master/toc-example-problems.gif

from shfb.

EWSoftware avatar EWSoftware commented on July 29, 2024

The problem is caused by long, unbroken strings of text that cannot be word wrapped. They seem to cause a minimum column width which makes the div exceed its normal bounds and causes the overlapping. You can work around it to some extent by inserting HTML word break elements (wbr) in the long text strings so that the browser knows were it can break the text and allow wrapping. It's not a valid MAML element but due to the way the elements are handled, it'll be recognized and passed through anyway.

<entry>
    <legacyBold>XXXXXXX<wbr/>XXXXXXXXXXX_<wbr/>XXXXXXXX_<wbr/>XXXXXXXXXXX</legacyBold>
</entry>

I do that in the link text for API members, but it looks like I missed a number of places so it's not consistent and I'll have to go back through fix those up. My knowledge of HTML and CSS is marginal so I'm not sure if there's a way to prevent the overlapping and just make it scroll horizontally instead or hide it if it overlaps. For me, it would probably be easier to just provide an option to hide the In This Article div for the page on a case-by-case basis.

from shfb.

glenncarr avatar glenncarr commented on July 29, 2024

We actually generate the MAML for this particular page with another tool as a build step before finally building the .shfbproj. It would be possible to add <wbr/>'s, those specific values are symbols that would look strange if broken. I'd thought about making that into a definitionTable, but it loses its value without the other information in the columns.

For me, it would probably be easier to just provide an option to hide the In This Article div for the page on a case-by-case basis.

That would be great and very much appreciated.

from shfb.

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.