wxPython widget not centered vertically

I am trying to center a CheckBox widget vertically inside a panel. I cannot figure out why it's aligned to the top.

I had to create a Panel for the CheckBox because without that the background looks ugly (Windows 10 -- see second image)

Thanks for suggestions!

class wxUIE(wx.Frame):

    def __init__(self, parent, title):


        wx.Frame.__init__(self, parent, size=(800, 400), title=title)

        self.editorText = wx.TextCtrl (self, style=wx.TE_MULTILINE+wx.SUNKEN_BORDER+wx.TE_BESTWRAP)

        self.myBar = wx.TextCtrl (self, -1)
        # Checkbox
        self.myCheckBoxPanel = wx.Panel(self, size=(-1, 25))
        self.myCheckBox = wx.CheckBox(self.myCheckBoxPanel, label="Highlight",  style=wx.ALIGN_CENTER_VERTICAL)

        self.sizer = wx.BoxSizer(wx.VERTICAL)
        self.sizer2 = wx.BoxSizer(wx.HORIZONTAL)

        self.sizer.Add(self.editorText, 1, wx.EXPAND)

        self.sizer.Add(self.sizer2, 0, wx.EXPAND)
        self.sizer2.Add(self.myBar, 10, wx.EXPAND)
        self.sizer2.Add(self.myCheckBoxPanel, 0, wx.EXPAND)

        self.SetSizeHints(800,400)
        self.SetSizer(self.sizer)
        self.SetAutoLayout(True)
        self.Show()


# Run the program
if __name__ == "__main__":
    app = wx.App(False)
    frame = wxUIE(None, "My Edit Control")
    frame.Show()
    app.MainLoop()

CheckBox aligned to top of panel

CheckBox is aligned vertically correctly but the background sucks.

bootstrap 4 checkbox inside list-group-item as collapse not functioning

I have created a bootstrap 4 list-group-item together with the collapse function.

My issue, is that the list-group-item interferes with a checkbox within it, such that the checkbox itself when clicked activates the collapse function as well, but also does not respond to being selected/unselected.

If a checkbox/radio is in the list-group-item, how can I make the checkbox work independently within the list-group-item, if the list-group-item is a collapsible button?

I need it to work like it does, but it there someway I can make the checkbox work without it triggering the collapse?

please review code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<div class="container">
  <div class="row">
    <div class="col">
      <div class="list-group mt-5">
        <a href="#" class="list-group-item list-group-item-action" data-toggle="collapse" data-target="#sample1" aria-expanded="false" aria-controls="sample1">
        <div class="custom-control custom-checkbox float-left">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1"></label>
</div>
    Cras justo odio
  </a>
  <div class="collapse mb-2" id="sample1">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
        <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
      </div>
    </div>
  </div>
</div>

get array of checked and unchecked checkboxes

I have checkbox input fields that are added to DOM dynamically. I want to get all checked and unchecked values as mentioned here.

HTML:

<input type="checkbox" name="lead_check[]" value="1">

Javascript:

$('#includes').click(function(e)
{
  e.preventDefault();
  $('#include-fields').append('<div class="holder-includes"><a href="#" class="remove-includes"><i class="fa fa-trash-o pull-right"></i></a>' +
    '<select name="team[]" class="form-control team">'+
    '<input type="checkbox" name="lead_check[]" value="1"></div>');

  var items = "";
  $.post("teamFetch", function(data)
  {
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.title+"</option>";
    });

    $(".team:last").html(items); 
  }, "json");



});

I am getting only checked values in lead_check[] array.

[lead_check] => Array ( [0] => 1 [1] => 1 [2] => 1 ).

I need to get all unchecked values too.

[lead_check] => Array ( [0] => 1 [1] => 0 [2] => 1 [3] => 0).

I tried adding hidden input fields too. But they didn't help either.

How do I achieve desired output in case of dynamically generated checkbox input fields.

Any help is very much appreciated. Thanks.

PHP Calc number of checkboxes ticked & Add their Values + Tax

I need to write a PHP script that computes the total cost of the ordered light bulbs and battery packs after adding 17.5 percent VAT. The program must inform the buyer of exactly what was ordered in a table, and what credit card was chosen to make payment.

Here is my code so far (it is a form with checkboxes and radio buttons to order light bulbs

bulbs.html

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>

<form name="myForm" action="calc.php" method="post">
Name: <input type="text" name="fullname"><br>

  <input type="checkbox" name="bulb[]" value="Bulb1"> Four 100-watt light bulbs for $2.39<br>
  <input type="checkbox" name="bulb[]" value="Bulb2"> Eight 100-watt light bulbs for $4.29<br>
  <input type="checkbox" name="bulb[]" value="Bulb3"> Four 100-watt long-life light bulbs for $3.95<br>
  <input type="checkbox" name="bulb[]" value="Bulb4"> Eight 100-watt long-life light bulbs for $7.49<br>


Number of battery packs you would like for $10.42 each: <input type="text" name="batterypacks"><br>

  <input type="radio" name="card" value="Card1"> Visa<br>
  <input type="radio" name="card" value="Card2"> Mastercard<br>
  <input type="radio" name="card" value="Card3"> American Express<br>

  <input type="submit" value="Submit">
</form>


</body>
</html>

this is my calc.php

<?php

echo $_POST;

echo "<br>";

echo $_POST['bulb'];




if(isset($_POST['bulb'])){
  if (is_array($_POST['bulb'])) {
    foreach($_POST['bulb'] as $value){
        $bulb1=2.39;
        $bulb2=4.29;
        $bulb3=3.95;
        $bulb4=7.49;
        $totalCost;
      echo $value;
    }
  } else {
    $value = $_POST['bulb'];
    echo $value;
  }
}



$price = 0;

foreach( $_POST['bulb'] as $key => $value ) {
   switch( $value ) {
      case 'Bulb1':
        $price = $price + 2.39;
        break;
      case 'Bulb2':
        $price = $price + 4.29;
        break;
      case 'Bulb3':
        $price = $price + 3.95;
        break;  
      case 'Bulb4':
        $price = $price + 7.49;
        break;
      
}
echo $price; // Total price

$afterTax = 0;

$price * .175 = $afterTax;

echo $afterTax;



$name = $_GET['card'];


foreach ($name as $card){ 
    echo $card."<br />";
}



?>

// if bulb 1 is selcted, add to total price
//compare checkedItem==Bulb1

else
checkedItem==Bulb2

else
checkedItem==Bulb3

I feel like I'm really close! However, whenever I click "submit" on bulbs.html, it just leads me to the code for calc.php and doesn't show any values at all. What am I missing in terms of calculating the checked boxes and adding tax?

Rails Checkbox boolean values not passing to database

Can't seem to get the checkbox to pass true to my database

this is the middle part of my devise sign-up form.

      <div class="form-group">
    <%= check_box_tag :admin, checked = true %>
    <%= label_tag :admin %>
  </div>

I've set the admin field to default to false in my schema.rb when Null

I don't know where else to start.

If you guys need any screenshots of controllers, etc.

Please comment :)

set max value of input box based on the selected checkbox in angular js

I have created a table which displays units, amounts , checkbox1forunits , checkbox2foramounts , input. the table has four records. the value of units and amounts come from the json array.

I want to set the max of input box based on the selected checkbox. for each input box there is different max value. if checkbox1forunits is selected then set max of input box to the corresponding given unit. if checkbox2foramounts is selected then set max of input box to the corresponding given amount.

please suggest me what condition should I write to achieve this. I am understanding the logic but getting difficulty writing it in angular js.the code is given below.

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.IsVisible = false;
            $scope.GenerateTable = function () {
                $scope.Customers = [
                {unit: 100, amount: 1000},
                { unit: 200,amount: 2000},
                {unit: 300,amount: 3000},
                { unit: 400,amount: 4000}
               ];

                $scope.IsVisible = true;



              };




        });

        app.directive("limitToMax", function() {
  return {
    link: function(scope, element, attributes) {
      element.on("keydown keyup", function(e) {

    if (Number(element.val()) > Number(attributes.max) &&
          e.keyCode != 46 // delete
          &&
          e.keyCode != 8 // backspace
        ) {
          scope.val=true;
          e.preventDefault();
          element.val(attributes.max);
        }
      });
    }
  };
});

    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Generate Table" ng-click="GenerateTable()" />
        <hr />
        <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
            <tr>
                <th>Unit</th>
                <th>Amount</th>
                <th>Checkbox1</th>
                <th>Checkbox2</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td></td>
                    <td></td>
                    <td><input type="checkbox"ng-model="checkbox1[$m]"</td>
                    <td><input type="checkbox"ng-model="checkbox2[$m]"</td>
                    <td><input type="number" ng-model="myVar[$m]" min="1" max="" limit-to-max /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

RWD flexbox form not working

I have one simple question :

html {
        box-sizing: border-box;
        
  }
  
  *,
  *:before,
  *:after {
        box-sizing: inherit;
  }
  
body  {
        background-image: url("IMG/tlo.jpg");
        background-size: cover;
        font-family: "Titillium Web", sans-serif; 
}                       

.top-container {
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.42; 
        margin-top: 1rem;
}

.main-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 1200px;
        align-items: center;
        align-content: center;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        margin: 0 -5px;
 }

 .h2 {
        font-size: 2rem;
        text-shadow: 1px 2px 2px #2b0100;
        color: #FFFFFF;
 }

.rf-container  {
        display: flex;
        margin: 0 55px;
        width: 380px;
        background-color: #f4f4f4;
        padding: 20px 20px;
        box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.24);
 }

 .form-rf {
        display: flex;
        flex-direction: column;
        flex: 1;
 }

.rf-element  {
        display:flex;
        background-color: #f8f8f8;
        border: 1px solid #c6c6c6;
        border-radius: 2px;
        margin-bottom: 1.25rem;
        height: 2.5rem;
        width: 340px;
}

.rf-element:hover {
        border-color: #88c814;
}

.main-icon {
        width: 45px;
        flex: 2;
        color: #dedede;
        font-size: 1.375rem;
        text-align: center;
        padding-top: 1%;
}

.main_field {
        flex: 10;
        height: 100%;
        border: none;
        background-color: #f8f8f8;
        font-family: 'Titillium Web', sans-serif;
        font-size: 1rem;
        color: #afafaf;
        padding-left: 3%;
        outline: none;
        border-style: none;
}

.main_field:focus {
        color: #428c42;
        box-shadow: 0 0 10px 2px rgba(204,204,204,0.9);
        border: 2px solid #a5cda5;
        background-color: #e9f3e9;
}

.separator {
        display: flex;
        width: 5px;
        min-height: 100%;
        background-color: #dedede;
        border-top: 0.1875rem solid #f8f8f8;
        border-bottom: 0.1875rem solid #f8f8f8;
}

 /*  checkbox */
.checkbox-custom {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 0.3125rem;
    cursor: pointer;
}

.checkbox-custom-label{
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before{
    content: '';
    background: #fff;
    border: 0.125rem solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width:1.25rem;
    height: 1.25rem;
    padding: 0.125rem;
    margin-right: 0.625rem;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "";
    background: #428c42; 
}
 /*  checkbox end */

.main_green_button {
        margin-top: 0.5rem;     
        width: 100%;
        border: 0.0625rem solid #3b9a00;
        border-radius: 0.125rem;
        font-size: 1.5rem;
        font-family: 'Titillium Web', sans-serif;
        color: #FFFFFF;
        text-shadow: 0.0625rem 0.0625rem #51850e;
        background: linear-gradient(#a3d840, #73b618);
        height: 3rem;
        box-shadow: 0.0625rem 0.0625rem 0.0625rem 0px #FFFFFF;
        cursor: pointer;
}

.main_green_button:hover {
        background: linear-gradient(#AAE650, #7DC323);
}

.main_green_button_smaller {
        height: 2.1875rem;
        font-size: 1rem;
        width: 45%;
        
}

.main_green_button_smaller-disabled {
        opacity: 0.5;
        cursor: no-drop;
}

.main_green_button_smaller-warning {
        background: linear-gradient(#f65e70, #f03747);
        border: 1px rgba(209, 18, 18, 0.616);
}

.main_green_button_smaller-warning:hover {
        background: linear-gradient(#FF697D, #FA4155);
}

 /*  button  end */

 /*  text area*/

 .textarea {
        width: 100%;
        margin-bottom: 1.25rem;
        background-color: #f8f8f8;
        border: 0.0625rem solid #c6c6c6;
        border-radius: 1.5px;
        font-family: 'Titillium Web', sans-serif;
        font-size: 1rem;
        color: #afafaf;
        resize: none;
 }

 .doublebtn {
    display: flex;
        justify-content: space-between;
        align-items: center;
 }


.footer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        opacity: 0.5;
}

.footer_top {
  margin: 3.125rem 0px 0.5rem 0px;
  
}


 /*  MEDIA*/

 @media only screen and (max-width: 945px) {
        
        .main-container {
        
        max-height: 3100px;
        }
} 

@media only screen and (max-width: 480px) {

 .main-container {
   margin: 0 auto;
 }

 .rf-container {
        margin: 0 auto;

 }
 .rf-element {
   
 }

 .main_field {
        
 }
 .doublebtn {
        
 }

}

<section class="main-container">
         <!-- REGISTER FORM -->
                                
         <h2 class="h2">Register Form</h2>
                <div class="rf-container">
         
                        <form action="" class="form-rf">
                                
                                <!-- REGISTER FORM / 1 row -->
                                        <div class="rf-element">
                                                <div class="main-icon">
                                                        <i class="fa fa-user" aria-hidden="true"></i>
                                                </div>
                                                <div class="separator"></div>
                                                <input class="main_field" type="text" name="username"placeholder="Username" onfocus="this.placeholder=''" onblur="this.placeholder='Username'" required>
                                        </div>
                                <!-- REGISTER FORM / 2 row -->          
                                        <div class="rf-element">
                                                <div class="main-icon">
                                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                                </div>
                                                <div class="separator"></div>
                                                <input class="main_field" type="password" name="password"placeholder="Password"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='Password'"  required>
                                        </div>                            
                                <!-- REGISTER FORM / 3 row --> 
                                        <div class="rf-element">
                                                <div class="main-icon">
                                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                                </div>
                                                <div class="separator"></div>
                                                <input class="main_field" type="password" name="Confirm Password"placeholder="Confirm Password" onfocus="this.placeholder=''" onblur="this.placeholder='Confirm Password'"  required>
                                        </div>                            
                                <!-- REGISTER FORM / 4 row --> 
                                        <div class="rf-element">
                                                <div class="main-icon">
                                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                                </div>
                                                <div class="separator"></div>
                                                <input class="main_field" type="email" name="Email"placeholder="Email" onfocus="this.placeholder=''" onblur="this.placeholder='Email'"  required>
                                        </div>    
                                <!-- REGISTER FORM / 5 row --> 
                                        <div class="rf-element">
                                                <div class="main-icon">
                                                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                </div>
                                                <div class="separator"></div>
                                                <select class="main_field" name="location" required>
                                                        <option value="" disabled selected>Your Location</option>
                                                        <option value="gdansk">Gdańsk</option>
                                                        <option value="krakow">Kraków</option>
                                                        <option value="poznan">Poznań</option>
                                                        <option value="warszawa">Warszawa</option>
                                                        <option value="wroclaw">Wrocław</option>
                                                </select>                                         
                                        </div>                                    
                                <!-- REGISTER FORM / 6 row --> 
                                
                                <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" >
                                <label for="checkbox-1" class="checkbox-custom-label">I have read and accept the terms of use.</label>

                                <!-- REGISTER FORM / sign in -->  
                                        <input class="main_green_button" type="submit" value="Sign up">                                                   
                                
         </form>
         
      </div>
        </section>        

codepen all

when I try make responsive,u see that forms do not fit on the page. In fact, no element is responsive despite the use FLEXBOX.

I tried to combine using values flex: 1 1 auto; or flex: 1 1 80% an excuse for .main-field input .

In short - I would like to receive responsive forms, but at the moment I have no idea how to deal with it.