I have the following in an aspx file:
...
<div class="graybg">
<div id="clmn1">
<div class="title2">Pick Up From:</div>
<div id="pickup_options" class="selservice" runat="server">
<div class="boxes">
<asp:ImageButton class="box1" src="./box1.png" runat="server" OnClick="OnClickAddress" alt="Ground Address" />
<div class="boxtitle">Ground Address</div>
</div>
<div class="boxes">
<asp:ImageButton class="box1" src="./box2.png" runat="server" OnClick="OnClickAirport" alt="Airport" />
<div class="boxtitle">Airport</div>
</div>
</div>
<div id="pickup_airport" runat="server">
<div class="rows">
<div class="inputbtnholder">
<asp:TextBox class="input1" ID="TextBox1" placeholder="Enter Flight Number" runat="server"></asp:TextBox>
<div id="Div1_pkup" class="imgbtn searchbtn"></div>
</div>
</div>
<div class="rows">
<asp:TextBox class="input1 martop" ID="TextBox2" placeholder="Airport" runat="server" />
<div id="airport_search" class="imgbtn searchbtn" />
</div>
<div class="rows">
<div class="inputbtnholder">
<script type="text/javascript"> ...
<asp:TextBox ID="pickupdatetime" class="input1 martop" placeholder="Select Date and Time" runat="server"></asp:TextBox>
<div id="Div2_pkup" class="imgbtn datebtn"></div>
</div>
</div>
</div>
<div id="pickup_ground" runat="server">
<div class="inphld">
<asp:TextBox class="input1" ID="address" placeholder="Search for address" runat="server"></asp:TextBox>
<div id="searchbtn" class="imgbtn searchbtn"></div>
</div>
<div class="inphld">
<asp:TextBox class="input1 martop" ID="pickupdate" placeholder="Select Date and Time" runat="server"></asp:TextBox>
<div id="datebtn" class="imgbtn datebtn"></div>
</div>
</div>
</div>
</div>
<div class="selservice">
....
All my indentation matching inspections (manual and automatic) tell me that the div of class selservice in the last row is after the div of class graybg. When I publish and surf to the page in Chrome, the rendering is messed up. Inspection with the chrome developer tools shows that selservice follows clmn1 within graybg. If I remove the line defining "airport_search", the rendering is correct, and the developer tools show selservice following graybg, as it should.
Can anyone explain this?
Change from a self closing tag. I.e.
<div id="airport_search" class="imgbtn searchbtn" />
to
<div id="airport_search" class="imgbtn searchbtn"></div>
Related
How do I align my 2nd column textbox to the first one with label in Bootstrap? Here's my current code:
<div class="form-group">
<div class="col-md-6">
<asp:Label ID="lblFullName" runat="server" Text="Full Name" AssociatedControlID="txtFirstName" CssClass="control-label"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control" placeholder="First Name"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="txtLastName" runat="server" CssClass="form-control" placeholder="Last Name"></asp:TextBox>
</div>
</div>
You create two rows:
<div class="form-group container">
<div class="row">
<div class="col-md-6">
<asp:Label ID="lblFullName" runat="server" Text="Full Name" AssociatedControlID="txtFirstName" CssClass="control-label"></asp:Label>
</div>
<div class="col-md-6"/>
</div>
<div class="row">
<div class="col-md-6">
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control" placeholder="First Name"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="txtLastName" runat="server" CssClass="form-control" placeholder="Last Name"></asp:TextBox>
</div>
</div>
</div>
I have this html/marckup code
<div class="col-md-12 pre-scrollable">
<asp:repeater runat="server" ID="rptDataInputs">
<itemtemplate>
<div class="row">
<div class="form-group">
<label class="col-md-2 control-label" for="textinput"><asp:Literal ID="Literal22" Text='<%#DataBinder.Eval(Container.DataItem, "ID") %>' runat="server" /></label>
<div class="col-md-6">
<asp:textbox ID="tb_value" MaxLength="10" runat="server" class="form-control" style="margin-bottom:10px;" Text='<%#DataBinder.Eval(Container.DataItem, "Value") %>'/>
</div>
<div class="col-md-2">
<asp:CheckBox Text="" runat="server" Checked='<%#DataBinder.Eval(Container.DataItem, "Insert").Equals("1") %>'/>
</div>
<div class="col-md-2">
<label runat="server" id="lbl_break"><input runat="server" id="break" type="radio" name="optradio"></label>
</div>
</div>
</div>
</itemtemplate>
</asp:repeater>
</div>
i need to get the value in the radio for each line.
How could i do this?
I have a project with master page and content page in content page design not load as their html,that is project solution version 5. I think this version code changed but I'm trying to recover this from my solution version 4 since appear same problem i'm refreshing my browser but not work.........I don't understand what happened and what should i do now.
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-shopping-cart" aria-hidden="true"> </i>Product Info</h3>
</div>
<div class="panel-body">
<h6> Invoice Number</h6>
<asp:TextBox ID="tbxInvoice" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
<h6> Product Name</h6>
<asp:DropDownList ID="productNameDDL" CssClass="form-control" DataSourceID="" runat="server" OnTextChanged="productNameDDL_TextChanged">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-product-hunt" aria-hidden="true"></i> Product Quantity</h3>
</div>
<div class="panel-body">
<h6> Total Quantity</h6>
<asp:TextBox ID="tbxTotalQuantity" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
<div class="row">
<div class="col-md-6">
<h6> Total Price</h6>
<asp:TextBox ID="tbxTotalPrice" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
</div>
<div class="col-md-6">
<h6> Price/Item</h6>
<asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-dollar" aria-hidden="true"></i> Product Price</h3>
</div>
<div class="panel-body">
<h6> Sale Price/Item</h6>
<asp:TextBox ID="tbxSalePricePerQuantity" CssClass="form-control" runat="server"></asp:TextBox>
<h6> Comments</h6>
<asp:TextBox ID="tbxComments" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
For better understand check this design image
Try to check if you don't miss any reference to some CSS class. Try to remove CssClass="form-control" and see what happens.
I have a dropdown menu and it has a set of items.I want to hide a particular panel when i am clicking on a dropdown menu.
Below is my c# code and my panel is designed in asp.net.
I want to disable panel XII when i was clicking on dropdown list item Not Applicable in panel X
protected void ddsscboard_SelectedIndexChanged(object sender, EventArgs e)
{
try {
string sscpanel = ddsscboard.SelectedItem.Text;
panelshow(sscpanel);
}
catch(Exception ex)
{
}
}
public void panelshow(string sscpanel)
{
if (sscpanel == "Not Applicable")
XII.Visible = false;
else
lblmsg.Text = sscpanel;
}
}
panel:-
Class X
<div class="form-group">
<label>Select Board</label>
<asp:DropDownList ID="ddsscboard" CssClass="form-control" OnSelectedIndexChanged="ddsscboard_SelectedIndexChanged" runat="server">
<asp:ListItem>Not Applicable</asp:ListItem>
<asp:ListItem>SSC</asp:ListItem>
<asp:ListItem>CBSC</asp:ListItem>
<asp:ListItem>ICSC</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
</div>
<div class="form-group">
<label>Complition Month</label>
<asp:TextBox ID="txtssccomplitionmonth" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Complition Year</label>
<asp:TextBox ID="txtssccomplitionyear" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Marks Obtained</label>
<asp:TextBox ID="txtsscmarksobtained" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Total Marks</label>
<asp:TextBox ID="txtssctotalmarks" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Upload File</label>
<asp:FileUpload ID="sscfile" runat="server" />
</div>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
</asp:Panel>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<div class="col-lg-12">
<asp:Panel ID="XII" runat="server" CssClass="panel panel-default">
<div class="panel-heading">
Class XII
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Select Board</label>
<asp:DropDownList ID="ddhscboard" CssClass="form-control" runat="server">
<asp:ListItem>Not Applicable</asp:ListItem>
<asp:ListItem>HSC</asp:ListItem>
<asp:ListItem>CBSC</asp:ListItem>
<asp:ListItem>ICSC</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
</div>
<div class="form-group">
<label>Complition Month</label>
<asp:TextBox ID="txthsccomplitionmonth" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Complition Year</label>
<asp:TextBox ID="txthsccomplitionyear" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Marks Obtained</label>
<asp:TextBox ID="txthscmarksobtained" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Total Marks</label>
<asp:TextBox ID="txthsctotalmarks" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label>Upload File</label>
<asp:FileUpload ID="hscfile" runat="server" />
</div>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
</asp:Panel>
<!-- /.panel-body -->
</div>
You need to set the AutoPostBack attribute in your DropDownList to true. Note you may also want to establish a blank ListItem so "Not Applicable" is not Selected by default:
<asp:DropDownList AutoPostBack="true" ID="ddsscboard" CssClass="form-control" OnSelectedIndexChanged="ddsscboard_SelectedIndexChanged" runat="server">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Not Applicable</asp:ListItem>
<asp:ListItem>SSC</asp:ListItem>
<asp:ListItem>CBSC</asp:ListItem>
<asp:ListItem>ICSC</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
I'm trying to make a form-group with a textbox and a button using asp.net and bootstrap.
Code:
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
This works just fine:
However, if I expand the browser's window, the textbox and the button got separated:
This group is inside <div class="container-fluid"/>. The entire code follows:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbMarcas">Selecione a marca:</label>
<asp:DropDownList ID="cbMarcas" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id" OnSelectedIndexChanged="cbMarcas_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbModelos">Selecione o modelo:</label>
<asp:DropDownList ID="cbModelos" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
</div>
</div>
What I'm doing wrong?
First you don't need to use all col-sm-4, col-md-4...
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
My guess is that you are using default .NET WebForms template so inside site.css you have:
input,
select,
textarea {
max-width: 280px;
}
You need to add own css for removing max-width property:
#txtPN {
max-width: initial;
}
For an ASP.NET project, the default Content/Site.css sets the max-width of a text input to 280px. If you remove this or override it, your text input will fill the input-group.
input[type="text"],
input[type="password"] {
/*max-width: 280px;*/
}