Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

Textbox not taking full width

I am new to bootstrap 3 and I am using it in my asp.net application

I have created one login page.

I used a panel and put textboxes inside it.

The issue is the textboxes were not taking full width, I set it width=100% but nothing happens

I am not what mistake I am doing here.


here is the code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Documentation.Login" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Formulation Technology - Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row top-buffer">
                <div class="col-md-2 col-md-offset-5">
                    <asp:Image ID="imgLogo" ToolTip="Formulation Technology" ImageUrl="~/images/fti_logo.png" runat="server" />
                </div>                
            </div>
            <div class="row top-buffer">
                <div class="col-md-7 col-md-offset-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title"><b>Log in</b></h1>
                        </div>
                        <div class="panel-body">
                            <div class="input-group">                              
                              <asp:Label ID="lblUsername" runat="server" Text="UserName" CssClass="control-label"></asp:Label>
                              <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" />
                            </div>
                            <br/>
                            <div class="input-group">                              
                              <asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="control-label"></asp:Label>
                              <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control" />
                            </div>
                            <br/>
                            <label class="checkbox">          
                                <asp:CheckBox ID="chkRememberMe" runat="server" Text="Remember Me" />
                            </label>
                                                        
                            <asp:Button ID="btnSubmit" runat="server" Text="Log in" CssClass="btn btn-lg btn-primary button300"  />
                            
                        </div>                              
                    </div>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </form>
</body>
</html>

Open in new window

1111.png
0
yadavdep
Asked:
yadavdep
1 Solution
 
GaryCommented:
Need a live link or the css - html tells us nothing.
0
 
Matthew KellyCommented:
When a sub element is set to 100% width (like the text boxes) it will only expand to 100% of the width of the container element. In this case "input-group" contains the text boxes and those may be limited.

An easy way to see where things are is add

style="border:1px solid #000000;"

Open in new window


To the elements to see how big they are. I am assuming panel-body is what has the grey border that is as large as the "Log In" header, so likely the input-group div is not as wide as the panel-body.

Try expanding the input-group to be wider.
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.

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