Can I make a grid or table that someone can type into?

  • Profile Image
    Asked on January 26, 2012 at 01:11 PM

    You can see what I was trying to do here:

    Scroll down and you'll see the Mon Tues Wed etc. as the top part of the table. I used the HTML option... but it doesn't seem to work.  I added some css to add a border...

    But couldn't figure out how to:

    a) have a border around each cell and/or retain some shading so you can tell where to type

    b) allow someone to type INTO the cells that they want to ... is that possible?


    If there is a way I can do this question using one of your other devices, please let me know.

    I have attached a screenshot from the WORD DOC, so you can see what I'm trying to accomplish.




  • Profile Image
    Answered on January 26, 2012 at 06:38 PM

    What about something like this?

    I created that by doing the following:

    1) Added a Text Area field, 2) gave it a name.


    3) Click the options wheel on the right, 4) selected properties, 5) Entered 10 for the number of columns:


    Closed those settings, then 6) clicked the options wheel again and selected Shrink


    7) Clicking the options wheel again, I now selected Duplicate:


    I repeated step 7, 3 more times to end up with 5 Text Areas.

    its then just a matter of 8) renaming each of those fields to the desired day of the way. 



    I then added the following Custom CSS

    .form-label-top {border:2px solid black; background-color:#CCCCCC !important; text-align:center; width:100px;}


    We could a few more customisations to those text areas, is there anything else you'd like to change about how they look?


  • Profile Image
    Answered on January 27, 2012 at 10:18 AM
    Thanks, I’ve implemented almost exactly what you’ve supplied… With a couple small changes and have a question.

    In the css and settings:
    I changed the width to 100% since it was affecting all my other field headers at 100px
    I changed the weight of the border and the background color…

    So, overall… I think it will work…

    FYI… I used the “Text Area” not the “Text Box” as your screenshots seem to indicate, as there is no option for how many rows that I could find for Text Box.
    Or, did you intend for me to use Text Area and your image is just pointing incorrectly?

    Question… your screenshot shows a scrolling device in the entry field… Why does mine not have the same?

    Here is my revised version:

  • Profile Image
    Answered on January 27, 2012 at 02:57 PM

    Your fields are much the same as mine. As soon as you put a certain amount of input into these text areas the scrollbars will appear (if that is what you mean)

    I see all the labels in your form are using this customised CSS. If you only want your new text area fields to use it. You can remove the class defination, and specify the individual element IDs themselves:

    i.e change:

    .form-label-top {border:2px solid black; background-color:#CCCCCC !important; text-align:center; width:100px;}


    #label_64, #label_65, #label_66, #label_67, #label_68, #label_69, #label_70  {border:2px solid black; background-color:#CCCCCC !important; text-align:center; width:100px;}


    Just another note, it may be worth specifying that 'Saturday' should be on different line to Mon-Fri. Just to make sure it uses a new a line. 


  • Profile Image
    Answered on January 27, 2012 at 03:06 PM
    Thanks… I was wondering about specifying only certain labels…
    Where do you actually find the label #?

    And, does it change if you move things around later… or add or remove other labels?


  • Profile Image
    Answered on January 27, 2012 at 04:30 PM

    I believe once an element gets added to the form, it retains the same ID, unless of course you delete it and then recreate it, but adding other elements around it shouldnt have an effect on its ID. 

    I use Chrome to gather the ids of elements, as I find it extremely easy to do. 

    Just right click on the field/element, select Inspect Element and a window will open that scrolls through the code and highlights the exact line of code responsible for putting the element on the web page. Very handy. 


    There is many other tools out there for retrieving information about the elements on a webpage. You also just search the pages source for 'Monday' or 'Tuesday' or whatever and work it from there. 

    You ask 10 different developers how they find the out the ids' of elements on webpage, your likely to get 5 or 6 different answers. 


    Hope that helps.