Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

HTML/CSS table cell behavior

Options
  • 27-02-2017 12:08am
    #1
    firefly08
    Registered Users Posts: 856 ✭✭✭


    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

  • Options
    #2
    Talisman
    Registered Users Posts: 6,065 ✭✭✭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.


  • Options
    #3
    firefly08
    Registered Users Posts: 856 ✭✭✭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