Solved

Textbox not taking full width

Posted on 2013-11-26
2
2,079 Views
Last Modified: 2013-11-28
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
Comment
Question by:yadavdep
2 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39678497
Need a live link or the css - html tells us nothing.
0
 
LVL 18

Accepted Solution

by:
Matthew Kelly earned 265 total points
ID: 39683906
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 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

16 Experts available now in Live!

Get 1:1 Help Now