4
mr-user
43d

Today I fought against a monster named as CSS and I sort of won.

I am having a problem in that the grid layout don't work with the scroll bar (overflow)

After hours of trying thing out I remember that I am just creating the prove of concept that the system can actually be build.

I said "Hey this is just a prototype, it doesn't need to be pixel perfect, and finally use height in css".

I really appreciate it if anyone can advise me on less dirty method. Here is the source code

https://jsfiddle.net/rc0f9t5j/

The input box should stay at the button no matter how much text the container have. The fiddle have the intended behavior.

Comments
  • 0
    set the input's row to a fixed height and make .scroll-bar fill https://jsfiddle.net/952cy3v4/

    (I'm by no means a CSS expert, so this might not be the best way but it's certainly better than what you did there XD)
  • 0
    @neeno

    Your css look nicer but it doesn't get the effect I wanted.Maybe I explain it incorrectly.

    I am trying to make the "grid-container" fixed size and when there is a multiple item in "conversation-text" , I want it to scroll. You can look at my code for example.

    Essentially there two scroll bar , one for the browser and one for the "conversation-text" (if the multiple item cannot be display)

    I don't know if the ASCII diagram below will show up correctly in your device but "|" represent the scroll bar.

    Btw thank for helping.

    ======================== | |

    conversation-text | | | |

    | | | |

    | | | |

    ========================| |

    text field | |

    ========================
  • 0
    if your only concerned about that part scrolling you can get rid of the default scroll bar by setting that element to no overflow.

    There's also a css property that simply hides the scroll bar but I don't think it's fully supported on all browsers.

    The only other way I can remember to do it is something like your doing where you set the width to force it out of view. i want to say it works even better if you wrap it in a container that has its overflow restricted.
  • 0
    @mr-user your ASCII drawing didn't work, but I think I understand. Take a look at this: https://jsfiddle.net/rc0fwxjt/
  • 1
    @neeno

    Thank you. Its work in fiddle but not in my browser.

    It's not your fault since I don't give you a complete example and I simplify it too much.
Add Comment