Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

HTML/CSS table cell behavior

  • 27-02-2017 12:08AM
    #1
    firefly08
    Registered Users, Registered Users 2 Posts: 854 ✭✭✭


    I'm trying to make a table cell editable, by making an input element appear when the cell is clicked. So far I've been doing this using AngularJS ng-show with a flag that indicates if it's in editing mode or not. My problem is, I do not want the cell to change it's size when it's in editing mode.

    This is the exact behavior I want. But when I do it the way I described above, the input box always changes the height of the cell. What I'm wondering is, how is that behavior achieved in the xeditable example I linked to? From examining their classes and css styles I can't see how they're doing it. I get the feeling they have some very simple trick for making this happen. I'm using the Bootstrap table class just like the xeditable example.

    PS. Yes I know I could just use that xeditable library, and I might, but now that I've discovered something I don't understand I'm determined to get to the bottom of it!

    Thanks...
    Tagged:


Comments

  • #2
    Talisman
    Registered Users, Registered Users 2 Posts: 7,151 ✭✭✭Talisman


    The simple answer is to rip off their CSS code. Without seeing what code you have it's not possible to make another suggestion.


  • #3
    firefly08
    Registered Users, Registered Users 2 Posts: 854 ✭✭✭firefly08


    Talisman wrote: »
    The simple answer is to rip off their CSS code. Without seeing what code you have it's not possible to make another suggestion.

    Thanks. I think I have it figured out now - they're setting the table cell height explicitly. I didn't find this before because I was looking at the .css file that comes with the library, and I didn't see anything like this. But from using the Chrome inspect tool, I discovered that the demo page has another css file that sets the cell height.


Advertisement