Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Problem with using boostrap with radio buttons

Posted on 2015-02-03
3
Medium Priority
?
134 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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 explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

609 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