Discussions

Expand all | Collapse all

there are white spaces between elements when adding background color using IOL technique

  • 1.  there are white spaces between elements when adding background color using IOL technique

    Posted 10-30-2018 23:41
    I added a background color for the whole section by using IOL technique. It was working perfectly fine before I change something in the dev console yesterday. I am not sure what I did and I think I messed up somewhere. Now i redid the whole thing and there are white spaces between elements between the background color. Does anyone have any idea how to fix this problem?
     
    BEFORE


    NOW - There are white spaces between elements 


    Please help with this problem. THANKS!!


  • 2.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 10-31-2018 00:47
    It looks to me like you may have changed the placement of the label. Moving it from above to the left. This is controlled by the form properties.

    There may be other issues at play, but that one stands out to me as a difference between the two.

    -Sharon


  • 3.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 10-31-2018 03:52
    Quick Base Junkie (find me on YouTube),

    It works. Thanks so much for your help!!!


  • 4.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 10-31-2018 20:31
    So glad my hunch worked out!
    -Sharon


  • 5.  RE: there are white spaces between elements when adding background color using IOL technique

    Top
    Contributor
    Posted 11-01-2018 14:25
    I don't know exactly what you did because you did not post any code but I can give you an understanding of why these white gaps appear. Using CSS QuickBase uses white borders on the <table> elements used to layout a section. This is a bit unusual and can be difficult to detect as most of the time table cell borders are black or some other visible color.

    So you have to set the background-color on the table and the border-color for the cells:
    $("table.formSection").css("background-color", "yellow");
    $("table.formSection tr td").css("border-color", "yellow");


  • 6.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 11-01-2018 17:36
    Thanks for your code. However, if I set the background color on the table and the border color for the cell, the background color will be filled for the whole form which I don't want it to be. I only want to customize the background color for one tab, not the whole form. I am sticking with what is showing in the screenshot below. If you have any idea to make all the white spaces between elements to be filled in yellow, that would be great. Otherwise, I am sticking with this. Thanks!!

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1760102/RackMultipart20181101-96475-sttoqh-Capture1_inline.PNG?1541093645">


  • 7.  RE: there are white spaces between elements when adding background color using IOL technique

    Top
    Contributor
    Posted 11-01-2018 17:40
    >  if I set the background color on the table and the border color for the cell, the background color will be filled for the whole form which I don't want it to be

    You just have to qualify which table section you want to modify by providing an appropriate selector:
    $("<selector> table.formSection").css("background-color", "yellow");
    $("<selector> table.formSection tr td").css("border-color", "yellow");

    I don't know what <selector> should be as it would be specific to your form.


  • 8.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 11-01-2018 17:51
    _anom the ultimate (Dan Diebolt),

    How do I figure out what <selector> for the section that I want to be customize is?

    Thanks!

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1760106/RackMultipart20181101-10716-1shsk9x-Capture2_inline.PNG?1541094845">

    in this case, is <selector> tab_t30?


  • 9.  RE: there are white spaces between elements when adding background color using IOL technique

    Top
    Contributor
    Posted 11-01-2018 18:03
    After a quick look I would think you would identify the table with the #sect_s* id like this:
    $("table#sect_s1 tr td").css("border-color", "yellow");
    $("table#sect_s2 tr td").css("border-color", "yellow");
    But for some reason you have an id without a value. Perhaps this is due to the fact you have tabs and QuickBase generates slightly different HTML in this case. 

    In any event I don't have time to create an equivalent application to test this. If you need individual help you can contact me off-world using the information in my profile:

    https://getsatisfaction.com/people/dandiebolt">https://getsatisfaction.com/people/dandiebolt">https://getsatisfaction.com/people/dandiebolt


  • 10.  RE: there are white spaces between elements when adding background color using IOL technique

    Posted 11-01-2018 18:11
    _anom the ultimate (Dan Diebolt),

    I got it. It works. 

    Yes. I am using tabs instead of using section.

    $("#tab_t30 table.formSection").css("background-color", "yellow");
    $("#tab_t30 table.formSection tr td").css("border-color", "yellow");

    Thanks for your help!!