Solved

Problem with using boostrap with radio buttons

Posted on 2015-02-03
3
115 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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