Welcome guest, is this your first visit? Create Account now to join.
Results 1 to 6 of 6

This is a discussion on Displaying buttons in <div> within the Chrome Troubleshooting section, part of the Google Chrome category: Hi all, I have a strange problem which only occurs in Chrome. I have a list of buttons on the ...


  1. #1
    SamWitse is offline Junior Member
    Join Date
    Nov 2010
    Posts
    5

    Default Displaying buttons in <div>

    Hi all,

    I have a strange problem which only occurs in Chrome.

    I have a list of buttons on the top of the page. When clicking on them, I add that button in a <div>, using a javacript function. This is nothing special.
    In Chrome, it does not allways the complete button, as shown
    where you can see 4 buttons at the bottom: '+', 'op het einde van de weg', '+', and 'draai' (do not care about the meaning, it's in Dutch :-) )

    The problem you already see is that the last button is not complete!

    When I hover over the last button, I suddenly get the complete button, as shown here:


    Unfortunately, I am not able to reproduce the behaviour in a simple page; but I do have the same problem each time on the same page. The website is not online yet.

    My questions are:
    - what can cause such a behaviour?
    - where do I have to start to find the origin of this problem?

    Many thanks on any idea.

  2. #2
    SamWitse is offline Junior Member
    Join Date
    Nov 2010
    Posts
    5

    Question

    Nobody with any idea on how to tackle this problem?

  3. #3
    SamWitse is offline Junior Member
    Join Date
    Nov 2010
    Posts
    5

    Default Test page

    Hi, I succeeded in creating a very small test page, in which you can see the error.
    Run test7.htm in Chrome, and click on the Add button.
    Normally you should see appear a button called 'Button 1' beneath the Add button.
    ==> the Button1 is not dispalyed competely, the bottom is not painted
    Click a second time on the Add button.
    Normally a button called 'Button2' should appear near Button1
    ==> Button2 is NOT painted, but is you move the mouse at the right hand side of Button1, suddenly Button2 appears!

    What is happening?????
    Here is the source:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function f() {
    n = document.getElementById('n').value ;
    n = parseInt(n) + 1 ;
    document.getElementById('n').value = n ;
    a = Chain.innerHTML ;
    Description = "button "+n;
    result = "<input type=\"button\" id=\""+n+"\" ";
    result = result + 'value=\"';
    result = result +Description+"\">" ;
    //alert ('result is '+result); //test
    a = a + result ;
    Chain.innerHTML = a ;
    } //f
    </script>
    <title>Internationaal Rukkersforum</title>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0" width="720">
    <tr>
    <td colspan="2" width="115" >
    </td>
    <td colspan="4">
    <form enctype="multipart/form-data" onsubmit="return formCheck()" action="zzz.htm" method="post" name="frm" >
    <button type="button" onClick="f();">Add</button>
    <table border="0" cellpadding="0" cellspacing="0" width="827">
    <tr>
    <td> <div style="width:750px;height:100px;overflow:auto" id="Chain"></div></td>
    </tr>
    </table>
    <input name="n" id="n" value="0" type="hidden">
    </form>
    </tr>
    </table>
    </body>
    </html>

  4. #4
    devnull69 is offline Member
    Join Date
    Jul 2010
    Posts
    32

    Default

    This code seems to be messed up.

    1. There is at least one /td missing (I expected it to be after the /form)
    2. What is Chain? It should be assigned var Chain = document.getElementById('Chain');

  5. #5
    SamWitse is offline Junior Member
    Join Date
    Nov 2010
    Posts
    5

    Default

    Sorry for the mess in the code, I didn't see the code formatting possibilities.
    I've found the problem (but not the solution):
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Adding buttons with JavaScript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function addButton()
    {
        nr = parseInt(document.getElementById('nr').value) + 1 ;
        document.getElementById('nr').value = nr ;
     
        result = "<input type='button' id='" + nr + "'  value='button " + nr + "' \>" ;
     
        buttons.innerHTML += result ;
    }
    </script>
    </head>
    <body>
    <form enctype="multipart/form-data" action="#" method="post" >
        <input type="button" onClick="addButton();" value="Add a Button" \>
            <table width="500">
                <tr> 
                    <td><div id="buttons"></div></td>
                </tr>
            </table>
        <input type="hidden" id="nr" value="0" \>
    </form>
    </body>
    </html>
    Chain is replaced by 'buttons', which is the id of the <div>

    When you click twice on the Add a Button-button, you'll see Button1 complete, and Button2 only half. The <div> is olny painted as large as the Add a Button-button.

    If you remove the width in the <table> tag, everything works perfect.

    How can I solve this? (without removing the width ofcourse)

  6. #6
    SamWitse is offline Junior Member
    Join Date
    Nov 2010
    Posts
    5

    Default Solved!

    It seems to be a bug in Chrome. Is resolved in Chromium.

Similar Threads

  1. Replies: 9
    Last Post: 06-28-2010, 10:12 PM
  2. Comment buttons script
    By bapakrob in forum Plugins Troubleshooting
    Replies: 5
    Last Post: 03-08-2010, 02:48 PM
  3. Toons Buttons Theme
    By VoyD in forum Chrome Themes
    Replies: 84
    Last Post: 01-22-2010, 12:58 AM
  4. Chromium 3.0.195.0 Buttons
    By Cherripez in forum Chrome Themes
    Replies: 3
    Last Post: 07-16-2009, 11:37 PM
  5. Chromeplugins webpage not displaying properly
    By kausikdatta in forum Bugs and Vulnerabilities
    Replies: 4
    Last Post: 09-14-2008, 01:54 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •