Solved

Problem with using boostrap with radio buttons

Posted on 2015-02-03
3
107 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
Comment Utility
Did you forget the attached images?
0
 

Author Comment

by:mgmhicks
Comment Utility
Sorry about that thanks.

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

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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 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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now