Grow your CSS skills. Land your dream job.

Row Headers

  • # February 9, 2013 at 3:37 pm

    Hi,

    I have no experience in CSS. There is a requirement in my application where iam forced to do some tweaking with web form default layout to fulfill my clients requirement.

    My Row header values ll be in the format “Member name(can even be multiple words) : code(a number)” placed inside one row header box. Now i need to split this two segments the first part(member name should be in a box and the code number following the ‘Colon’ should form the adjacent box. like splitting one row header box into two segments to display the two parts of the content separately.

    How should i proceed with this. Please do help me out.

    thanks,

    # February 9, 2013 at 3:52 pm

    I think we would need to see some code but this sounds more like a database or javascript question than HTMl/CSS

    # February 9, 2013 at 4:06 pm

    Hi Paulie,

    Iam sorry if iam completely wrong on this. I was able to find one tweak in a forum relating my application where they had changed the code below in a particular css file to display the full member name on that web form. so i presumed any changes to the default form layout has to be made in that css file.
    .rowHead {
    visibility: visible;
    /* overflow-x:auto; */
    overflow-x:visible;
    overflow-y:hidden;
    }

    thanks,

    # February 9, 2013 at 4:12 pm

    That might hide the text but it won’t break it up into chunks and put it in separate elements.

    You will need javascript to do that.

    # February 9, 2013 at 4:14 pm

    Thanks for the clarification Pauli. But ignoring the text splitting part can i at least divide this row header box into two?

    # February 9, 2013 at 4:18 pm

    Again, without seeing the code, it’s hard to comment.

    I am struggling to visualise what you have already and how it is going to look one we’re done.

    Could you put a reduced case in Codepen?

    # February 9, 2013 at 4:31 pm

    http://cdpn.io/mlrut

    # February 9, 2013 at 4:42 pm

    @sj1208 Without adding the HTML, we can’t see the problem you are having. Can you please update the pen with the necessary HTML so we can identify your problem?

    # February 9, 2013 at 4:43 pm

    And my web forms looks like this
    http://www.oracle.com/webfolder/technetwork/tutorials/obe/hyp/11.1.2.1_FR_ERPIdrillThru/images/t010101.gif

    where i want to split the row header 7220: Freight into two attached boxes with 7220 in one and Freight in the other.

    # February 9, 2013 at 4:52 pm

    That doesn’t look like a form, it looks like a table.

    We need to see the HTML.

    # February 10, 2013 at 11:26 pm

    http://codepen.io/anon/pen/jcqFk

    It not the html code for the form image i shared above. Its the html of another similar form.

    thanks,

    # February 11, 2013 at 9:33 am

    Hi @sj1208!

    All I see is a wall of code there. I pulled out the HTML table and it looks like a [mass of nested tables](http://jsfiddle.net/Mottie/Afyqg/)… it’s not pretty.

    How about you show us a screen shot of the table and please explain again what you are trying to do.

    # February 11, 2013 at 10:02 am

    As near as I can tell this is a single table cell which holds (effectively) two pieces of data. The ‘number’ and the ‘name’ that needs to be divided.

    Clearly it’s not beyond anyone’s capabilities to add and extra cell/column but the posts to date have been singularly lacking in specific code.

    In any case, how this data (and any previous data) will be handled is not something I have seen any comment on.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".