Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 148
  • Last Modified:

Problem with using boostrap with radio buttons

I have the following code for a payment page.  My problem is when I start shrinking the page my radio buttons go out of whack and I cant figure out why.  I have 2 images attached one is what it looks like when web page is open full, the 2nd is what happens when I try to shrink it.   Could you please help to tell me where I am missing the boat on this stuff.  My master page is the vs2013 net 4.0 default master page.



<%@ Page Title="Make a Payment" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Payments.aspx.vb" Inherits="CollectionSystem2015.Payments" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<asp:Content ID="content2" ContentPlaceHolderID="HeadContent" runat="server">

     
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    
     <script src=”../scripts/jquery-ui-1.11.2.js”></script>
    <script src="../Themes/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
    <script src="../Scripts/jquery.watermark.js"></script>
         <%--<script src="../Scripts/Supplement.js"></script>--%>
   <%-- <script src="../Scripts/jquery.validate.js"></script>--%>
    <link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.theme.min.css">
	<link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.css">
    <link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.structure.css">
        <link rel="stylesheet" href="../content/bootstrap.css">
    <link rel="stylesheet" href="../Content/SiteSupplement.css" />

 <style type="text/css">


#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

/*#radio1{margin-right: 5px;}
#radio2{margin-right:5px; margin-left:20px;}
#txtRouteNo {margin-right:20px;}
#txtName {width:200px;}
        #approved {width:200px;
        }
        #tabs-1,#tabs-2{margin-left:100px;

        }
        #txtCardNo,#txtCardHolder,#txtStreet,#txtCity{width:200px; margin-right:20px;}
        #txtMonth{width:50px;}
        #txtYear{width:75px;}
        #txtCVC{width:50px;}
        #txtApt{width:130px;}
        #txtState{width:50px;}
        #txtZip{width:65px; margin-left:8px;}*/
      

       
     </style>
   
      <script>
          //$(document).ready(function () {
          //    $('.#tabs').change(function (e) {
          //        e.preventDefault();
          //        alert('tab clicked!');
          //    });

          //});

          ////$(function () {
          ////    $('#tabs').bind('change', function (e) {
          ////        // e.target is the new active tab according to docs
          ////        // so save the reference in case it's needed later on
          ////        window.activeTab = e.target;
          ////        // display the alert
          ////        alert("hello");
          ////        // Load data etc
          ////    });
          //});

          function openConfirmModal() {
              $('#confirmModal').modal('show');
          };
          function openErrorModal() {
              $('#ErrorModal').modal('show');
          };

          $(function () {
              //$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
              //$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
              $("#txtRtNo").watermark('Required Field');
              //$('Input').watermark('Required Field');
              $('#MainContent_txtExpMonth').watermark('MM');
              $('#MainContent_txtExpYear').watermark('YYYY');
              $('#MainContent_txtPhone').watermark('(999)-999-9999');
              $('#MainContent_txtZip').watermark('Zip');


          });
         </script>

    <br />
   
   <h2>Payments - Make a Payment</h2>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <hr />
                <h4>Collection Payments</h4>
                <asp:PlaceHolder runat="server" ID="PlaceHolder1">
                    <p class="text-danger">
                        <asp:Literal runat="server" ID="FailureText" Text="* ALL FIELDS ARE REQUIRED" />
                    </p>
                    <asp:ValidationSummary runat="server" CssClass="text-danger" ID="ValidationChecks" ValidationGroup="Checks" />
                    <asp:ValidationSummary runat="server" CssClass="text-danger" ID="ValidationCards" ValidationGroup="Cards" />
                    <asp:ValidationSummary runat="server"></asp:ValidationSummary>
                </asp:PlaceHolder>



            </div>
          
                 <div class="col-md-12">
                     <ul id="tabs" class="nav nav-tabs" data-tabs="tabs" tabindex="2">
                        <li class="active"><a href="#tab1"
                            data-toggle="tab">Pay by Online Check</a></li>
                        <li><a href="#tab2" data-toggle="tab">Pay by Credit Card</a></li>
                        <li><a href="#tab3" data-toggle="tab">Profile</a></li>
                    </ul>

                 </div>
             <%--   tab content 1--%>
                 <div id="my-tab-content" class="tab-content">
                      <div class="tab-pane  active" id="tab1">
                           <div class="row header" style="margin-top: 20px">
                                <div class="input-group">
                                <div class="col-md-8">
                                    
                                        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Check_tip_Small.gif" />

                                    </div>
                                    <div class="col-md-4 center-block" >
                                        
                                </div>
                                </div>
                                
                            </div>

                           <div class="row">
                                <div class="col-md-4">
                                   
                                        <div id="radio">
                                            <span>
                                            <input type="radio" id="radio1" name="radio" checked="checked" dir="auto"><label for="radio1">Checking</label>
                                            <input type="radio" id="radio2" name="radio" title ="Savings"><label for="radio2">Savings</label>
                                            </span>
                                        </div>
                                        <%--   <input type="text" class="form-control" value="C#.Net">--%>
                                    
                                    <br />
                                </div>

                                 </div>

                        </div>


                      <%-- tab content 2--%>
                      
                        <div class="tab-pane" id="tab2">
                            <div class="row header" style="margin-top: 20px">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/credit_card_logos_13.gif" />

                                    </div>

                                </div>
                            </div>
                            </div>
                 </div>
             </div>

              
            </div>

        </div>





    </asp:Content>

Open in new window

0
mgmhicks
Asked:
mgmhicks
1 Solution
 
Terry WoodsIT GuruCommented:
Did you forget the attached images?
0
 
mgmhicksAuthor Commented:
Sorry about that thanks.

sample-image-1.pngsample-image-2.png
0
 
COBOLdinosaurCommented:
All the images tell us is what we already know; there is a styling issue.  So post a link to the page and we will do diagnostics to determine what is creating the problem.

Guessing from the images it might be media-queries, jquery screwing uo the CSS inline, a width incorrectly expressed or a float problem.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now