[RESOLVED]my asp:TextBox using bootstrap is getting disabled when reducing the screen size to mobile device

Hi there,

If someone can please help with the issue below.

I am using asp:textbox with bootstrap. It works fine on desktop screen. But when resizing it to mobile version ie. decreasing the screen size. The bootstrap control does not work.

It just becomes static readonly. It happens to all my checkbox , button, text box.

codes are below:

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <asp:Label ID="lblId" CssClass="col-sm-3 control-label" runat="server" For="txtId">Booking reference</asp:Label>
                    <div class="col-sm-4">
                        <asp:TextBox ID="txtId"  CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                </div>

<div class="col-xs-12">
                    <div class="form-group">
                        <asp:LinkButton ID="btnNext" CausesValidation="false" runat="server" Text="Next"
                            class="btn btn-primary pull-right" />
                    </div>
                </div>

</div>

</div>

Hi code_hh,

Thanks for your post here.

According to the documentation ,you need to add viewport tag to your head like below:

<meta name="viewport" content="width=device-width, initial-scale=1">

About how to use bootstrap css, I suggest that you can refer to the link below:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

http://getbootstrap.com/css/

Best Regards,

Kevin Shen.

I have done that on my master page…..

thanks kevin for your reply…any further help would be much appreciated.Thank you

Do you have any other code that relates to this? I created a similar HTML example that can be seen below that doesn’t appear to have the same issues that you are referring to. Is there any other elements around this that could be causing an issue :

<div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <!-- I've always been a fan of the 2-10 rule with label - element sizing in Bootstrap -->
                    <label class="col-md-2 control-label" >Booking reference <label>
                    <div class="col-md-10">
                        <input class='form-control' />
                    </div>
                </div>
                <div>
                    <div class="form-group">
                      <button class='btn btn-primary pull-right'>Next</button>
                    </div>
                </div>
           </div>
</div>

You can see an example of this here, however I don’t see anything that would cause your textbox to be "disabled" unless there is some additional code / Javascript that might be doing that.

just noticed that if I remove col-xs-12 …it works fine..any logic to that pls

The col-{x} classes are part of Bootstrap’s built-in Grid System, which allow you to define classes that will use these values to scale your content based on the size of the Viewport. For instance the class
"col-md-8" would take up 8 out of the available 12 "grid" positions when the screen size fell into the medium ("md") category of 768px and 922px, however the "col-xs-12" class would cause a particular element to take up all 12 of the positions when the screen
was very small ("xs").

You can visit the link that I provided above and try resizing your browser to see how the current grid reacts.

Hi there…this is my page below in brief….I also have a standard master page that it is referring to

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Standard.Master"
    CodeBehind="page1.aspx.vb" Inherits="web.page1" %>

<%@ Register Assembly="Web" Namespace="Web" TagPrefix="ma" %>
<%@ Register Assembly="Hip" Namespace="ParkResorts.Web.UI.WebControls" TagPrefix="" %>
<%@ MasterType VirtualPath="~/Standard.Master" %>

<asp:Content ID="Content6" ContentPlaceHolderID="Content" runat="server">

<div class="row">

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <asp:Label ID="lblId" CssClass="col-sm-3 control-label" runat="server" For="txtId">Booking reference</asp:Label>
                    <div class="col-sm-4">
                        <asp:TextBox ID="txtId"  CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                </div>

<div class="col-xs-12">
                    <div class="form-group">
                        <asp:LinkButton ID="btnNext" CausesValidation="false" runat="server" Text="Next"
                            class="btn btn-primary pull-right" />
                    </div>
                </div>

</div>

</div>

</div>

</div>

</asp:Content>

yes your one works fine…but some how mine doesn’t work fine if I make the screen small and and add the col-xs-12

I’m not sure if this is a typo or not, but it looks like you might be missing an opening ‘<’ on your class with "col-md-8 col-xs-12" :

<div class="row">

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">

which should be :

<div class="row">

<div class="col-md-8 col-xs-12">
            <div class="form-horizontal">

Leave a Reply