CODEWITHSUNDEEP
htmlcsswordpressdrop-down-menucontact-form-7
sammyb123
sammyb123

Reputation: 493

Contact Form 7 Drop down not Selectable in one row only

Everything in the form works just fine even the other drop down menus but on the first row, the first two items are not selectable even though they are exactly the same as the drop downs which leads me to believe that its something else causing the issue. When I go to the dev tools and highlight it it highlights the entire row and not the single menu item. I am sure this is the problem but do not know where the error in the code is.

The site is http://foreclosure-help.org/

Here is the code for the first row (I am adding comments here to better explain that they are supposed to do):

 <!--this is the container div for the whole form-->
<div style="background: rgba(0, 0, 0, 0.5); width:747px; height:520px;  margin-top:20px;" class="container">

<!--Header styling-->
<h3 style="color:white; padding-left:25px;" id="show">ABOUT YOUR HOME LOAN</h3>

<!--container for first row-->
<div style="color:white;">

<!--First menu items-->
<div style="float:left; margin-right:10px; margin-left:10px; padding-left:20px; opacity:1 !important;" id="show">
<p> PROPERTY VALUE:<br />
[select PropertyValue id:PropertyValue "---" "$0 - $99,999" "$100,000 - $124,999" "$125,000 - $149,999" "$150,000 - $174,999" "$175,000 - $199,999" "$200,000 - $224,999" "$225,000 - $249,999" "$250,000 - $274,999" "$275,000 - $299,999" "$300,000 - $324,999" "$325,000 - $349,999" "$350,000 - $374,999" "$375,000 - $399,999" "$400,000 - $424,999" "$425,000 - $449,999" "$450,000 - $474,999" "$475,000 - $499,999" "$500,000 - $524,999" "$525,000 - $549,999" "$550,000 - $574,999" "$575,000 - $599,999" "$600,000 - $624,999" "$625,000 - $649,999" "$650,000 - $674,999" "$675,000 - $699,999" "$700,000 - $724,999" "OVER $730,000"]
</p>
</div>

<!--second menu items-->
<div style="float:left; margin-right:10px; margin-left:10px;" id="show">
<p> YOUR LENDER:<br />
[text YourLender id:YourLender]
</p>
</div>

<!--third and last menu item in first row-->
<div style="margin-left:10px;" id="show">
<p STYLE="color:white !important;"> BALANCE OWING:<br />
[select BalanceOwing id:BalanceOwing "---" "$10,000" "$20,000" "$30,000" "$40,000" "$50,000" "$60,000" "$70,000" "$80,000" "$90,000" "$100,000" "$110,000" "$120,000" "$130,000" "$140,000" "$150,000" "$160,000" "$170,000" "$180,000" "$190,000" "$200,000" "$210,000" "$220,000" "$230,000" "$240,000" "$250,000" "$260,000" "$270,000" "$280,000" "$290,000" "$300,000" "$310,000" "$320,000" "$330,000" "$340,000" "$350,000" "$360,000" "$370,000" "$380,000" "$390,000" "$400,000" "$410,000" "$420,000" "$430,000" "$440,000" "$450,000" "$460,000" "$470,000" "$480,000" "$490,000" "$500,000" "$510,000" "$520,000" "$530,000" "$540,000" "$550,000" "$560,000" "$570,000" "$580,000" "$590,000" "$600,000" "$610,000" "$620,000" "$630,000" "$640,000" "$650,000" "$660,000" "$670,000" "$680,000" "$690,000" "$700,000" "$710,000" "$720,000" "$730,000"]
</p>
</div>

<!--close container div for row-->
</div>

<!--line break to start new row-->
<br>

Upvotes: 0

Views: 752

Answers (1)

masa
masa

Reputation: 2820

The div element for BALANCE OWING is getting on top of the two preceding elements, as you can see in the snapshot below:

enter image description here

This happens because the two preceding elements are floated.

One solution is to use inline blocks instead, but I am not sure if this is the best solution:

<div style="color:white;">

<!--First menu items-->
<div style="display: inline-block; margin-right:10px;margin-left:10px;padding-left:20px;opacity:1 !important;" id="show">
<p> PROPERTY VALUE:<br>
[select PropertyValue id:PropertyValue "---" "$0 - $99,999" "$100,000 - $124,999" "$125,000 - $149,999" "$150,000 - $174,999" "$175,000 - $199,999" "$200,000 - $224,999" "$225,000 - $249,999" "$250,000 - $274,999" "$275,000 - $299,999" "$300,000 - $324,999" "$325,000 - $349,999" "$350,000 - $374,999" "$375,000 - $399,999" "$400,000 - $424,999" "$425,000 - $449,999" "$450,000 - $474,999" "$475,000 - $499,999" "$500,000 - $524,999" "$525,000 - $549,999" "$550,000 - $574,999" "$575,000 - $599,999" "$600,000 - $624,999" "$625,000 - $649,999" "$650,000 - $674,999" "$675,000 - $699,999" "$700,000 - $724,999" "OVER $730,000"]
</p>
</div>

<!--second menu items-->
<div style="display: inline-block; margin-right:10px;margin-left:10px;" id="show">
<p> YOUR LENDER:<br>
[text YourLender id:YourLender]
</p>
</div>

<!--third and last menu item in first row-->
<div style="display: inline-block; margin-left:10px;" id="show">
<p style="color:white !important;"> BALANCE OWING:<br>
[select BalanceOwing id:BalanceOwing "---" "$10,000" "$20,000" "$30,000" "$40,000" "$50,000" "$60,000" "$70,000" "$80,000" "$90,000" "$100,000" "$110,000" "$120,000" "$130,000" "$140,000" "$150,000" "$160,000" "$170,000" "$180,000" "$190,000" "$200,000" "$210,000" "$220,000" "$230,000" "$240,000" "$250,000" "$260,000" "$270,000" "$280,000" "$290,000" "$300,000" "$310,000" "$320,000" "$330,000" "$340,000" "$350,000" "$360,000" "$370,000" "$380,000" "$390,000" "$400,000" "$410,000" "$420,000" "$430,000" "$440,000" "$450,000" "$460,000" "$470,000" "$480,000" "$490,000" "$500,000" "$510,000" "$520,000" "$530,000" "$540,000" "$550,000" "$560,000" "$570,000" "$580,000" "$590,000" "$600,000" "$610,000" "$620,000" "$630,000" "$640,000" "$650,000" "$660,000" "$670,000" "$680,000" "$690,000" "$700,000" "$710,000" "$720,000" "$730,000"]
</p>
</div>

<!--close container div for row-->
</div>

Upvotes: 1

Related Questions