Solved

Problem with using boostrap with radio buttons

Posted on 2015-02-03
3
117 Views
Last Modified: 2016-02-25
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
Comment
Question by:mgmhicks
3 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 40588102
Did you forget the attached images?
0
 

Author Comment

by:mgmhicks
ID: 40588541
Sorry about that thanks.

sample-image-1.pngsample-image-2.png
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40589254
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question