Develop Reference

Inconsistent Appearance in ASP.Net

I'm having an issue with one of my webpages in my ASP.NET MVC Application. I have the HTML in Webstorm, and when I open it from there, it looks as intended. When I then copy over to the View in Visual Studio all of the Form controls are a mess.
Even if I directly copy everything from Webstorm into the _layout.cshtml, leaving only the script and style links (and RenderBody();) it's still completely off.
The Form itself is just copied from getbootstrap.com so it should be just fine. I have no clue what the issue could be, I hope someone has an idea.
Link so you can see the issue: https://imgur.com/a/bxFrr3P
Markup from Webstorm:
<div id="wrapper" >
<div id="content-wrapper" class="d-flex flex-column ">
<!-- Main Content -->
<div id="content" style="width: 100%;">
<hr>
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Page Title</h1>
</div>
<div class="col-xl col-md mb-4 " >
<div class="card shadow h-100 py-2 card-background" >
<div class="card-body" style="padding: 0px;">
<div class="box-part text-center mt-2 mr-2 mb-2 ml-2 m-3">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Sounds like bootstrap isn't loading.
I would reinstall bootstrap and/or check your package references.

Not able to access input text box value to code behind asp.net c#

Here my page :
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:HiddenField ID="hdnfromDate" Value="" runat="server" />
<asp:HiddenField ID="hdntoDate" Value="" runat="server" />
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Issue Invoice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="reused_form" runat="server">
<p>
Send invoice to...
</p>
<div class="form-group">
<label for="name">
To:</label>
<input type="text" class="form-control"
id="name" name="name" readonly maxlength="50" runat="server">
</div>
<div class="form-group">
<label for="email">
CC:</label>
<input type="email" ID="cc" class="form-control" runat="server" multiple>
</div>
<div class="form-group">
<strong><i>Note:</i><small>&nbsp<i>The invoice can not be edited after issuing.</i></small></strong>
</div>
<asp:LinkButton CssClass="btn btn-warning m-btn btn-block btn-lg m-btn--custom m-btn--icon m-btn--air " OnClick="Onbtn3_Click" Text="Issue Invoice " ID="LinkButton3" runat="server"></asp:LinkButton>
</form>
<div id="success_message" style="width: 100%; height: 100%; display: none;">
<h3>Sent your message successfully!</h3>
</div>
<div id="error_message"
style="width: 100%; height: 100%; display: none;">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</div>
In cs File i am trying to access email value using cc.Value as for email textbox id is cc. But it always gets empty string. In my default master page i have a form tag which runs at server so if i keep this modal in a form runat server then gives me error saying page can have only one form tag. Please can anyone help me out. Thanks in advance

This may help
There is Text property available, so you can use textBox.Text to get textbox contian. In your case cc.Text.

Try textBox.text(). Should work.

As Html 5 type=“email” control is not available using runat attribute, you can access TextBox like below:
<asp:TextBox ID="txtBoxCc" runat="server" TextMode="Email"></asp:TextBox>
Now in codebehind you can access it like txtBoxCc.Text
Also, you have to put it like below:
if(!Page.IsPostBack) {
string cc = txtBoxCc.Text;
}

ASP.NET C# CSS/Boostrap overlapping

Needed some assistance,
Please look at the picture below, as you can see, When I click the input which has calender, the calender pop up inside the table and it generates a scroll bar which I have to scroll down to see the bottom calender, how do I make sure it is send to front which will show the entire calender outside that table ?
Thanks!
Calender CSS: https://github.com/benitolopez/hotel-datepicker/tree/master/dist
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="fa fa-shopping-cart"></i> Shopping cart</h4>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td class="text-center"></td>
<td class="text-center">Image</td>
<td class="text-left">Product Name</td>
<td class="text-left">Rental Period</td>
<td class="text-left">Rental Rate</td>
<td class="text-left">Deposit Amount</td>
<td class="text-right">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><p></p><button type="button" data-toggle="tooltip" title="Remove" class="btn btn-danger" onClick=""><i class="fa fa-times-circle"></i></button></td>
<td class="text-center"><img width="60px" src="image/demo/shop/product/E4.jpg" alt="Xitefun Causal Wear Fancy Shoes" title="Xitefun Causal Wear Fancy Shoes" class="img-thumbnail"></td>
<td class="text-left">Emasa rumas gacem</td>
<td class="text-left"><div class="input-group btn-block" style="min-width: 100px;">
<form method="POST" action="checkout.html">
<input type="text" name="input-id" id="input-id" value="" class="form-control">
</form>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="Update" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
</span></div></td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
<td class="text-right">$114.35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="1"><strong>Meeting Location:</strong></td>
<td class="text-left" colspan="6">$93.73</td>
</tr>
<tr>
<td class="text-right" colspan="6"><strong>Total Amount Payable:</strong></td>
<td class="text-right">$121.85</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
Update:
I removed the "position" in the css of the calender and it now looks like this.
Everytime the calender pop up, the table will adjust/squeeze to fit the calender, how to make sure that calender just shows without changing the size of the table?
Thanks!

Bootstrap textbox width and alignment changes when minimizing window

I have below code in my .cshtml file,
<div class="input-group col-lg-2 navbar-right" style="margin-top: 7px">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</span>
</div>
When I minimize the window the textbox appears on top of other controls and width of the textbox changes too.
I tried below css but it doesn't work,
<style type="text/css">
.form-control {
width: auto;
position: absolute;
}
</style>
Any ideas what I am doing wrong here?

Have you tried to remove the position: absolute and set width:100%;

Try this:
<div class="form-group">
<div class="col-md-offset-7 col-md-2">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Then remove the position:absolute

referring to What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
your code does not have col-md-* or col-sm-* so properties on minimizing the browser window are simply undefined.
add classes as
<div class="input-group col-lg-2 col-md-4 col-sm-2 navbar-right" style="margin-top: 7px">

C# not picking up change in ASP or HTML elements

I have a few dynamic html items which are populated by jquery and/or JS, but for some reason the C# will only see the original values from when the page loaded.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3">Date</label>
<div class="col-sm-9">
<asp:ToolkitScriptManager ID="tsm" runat="server" />
<asp:TextBox CssClass="btn btn-default pull-right" ID="calBtn" runat="server" Style="width: 150px">Click Here</asp:TextBox>
<asp:CalendarExtender ID="calExt" TargetControlID="calBtn" runat="server" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5">
Start (Actual Begin Time)</label>
<div class="col-sm-7">
<%--<input runat="server" id="startTime" class="time btn btn-default pull-right" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="startTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-4">End</label>
<div class="col-sm-8">
<%--<input runat="server" id="endTime" class="time btn btn-default pull-right disabled" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="endTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
</form>
Above the asp:TextBox items I have commented out my original "input" elements since I was trying both methods. If I call string date = calBtn.Text in the C#, it says "Click here" as the returned value. I have also tried date = calExt.SelectedDate which returns empty.
In the text box I have tried .Text and .SelectedValue but still empty.

#DrewKennedy had the right idea. I was nesting all these <form> tags for the Bootstrap which caused it to not be seen server-side. I had wrongly assumed I needed the nested forms to make the CSS work.
I already had a <form runat="server"> surrounding the whole body, but changing the inner <form class="form-horizontal"> to <div class="form-horizontal"> fixed the problem.

ASP.NET only support ONE SINGLE . So you had to add runat=server on your form makup.
Now it is working for me.