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">
Related
I am using puppeteer in trying to find the selector for a login page.
the login html is:
<form action="/login?app=LM&var=au" method="POST" name="login-form" id="login-form">
<input type="hidden" name="_csrf" value="BQ2YoR3d-5P__6b5HfqlVOjv8YgTypKV92XA" />
<div class="form-group text-center">
<input type="text" name="username" id="login-form-username" placeholder="Username" class="form-control" required value="">
</div>
<div class="form-group text-center">
<input type="password" name="password" id="login-form-password" placeholder="Password" class="form-control" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
</div>
</form>
I tried #submit, #login-form-submit and several others for the selector. what would the selector for the login button be as there is no ID name?
i am using ClickAsync();
Either give your submit button an id property and use the #submit selector you previously tried:
<button id="submit" type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
Or use form button[type=submit] as selector.
I have two seperated buttons that have created, but they closely packed to another there is no space in between i have tried to use ml-auto. There is not much difference on the UI side and need some help around it.
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
First of all I think both of your buttons need to sit inside a .row element. Right now they are on different rows. Then you can apply a class like .mr-2 (margin right of 2 units, or increase the number if you want more) to the first button wrapper. Then you will have some spacing between your buttons.
<div class="row">
<div class="form-group">
<div class="col-xs-3 mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
</div>
You can see a working solution here: https://codepen.io/razvan-tudosa/pen/YzqvQVm
More info about how to space stuff you can find in the twitter bootstrap docs: https://getbootstrap.com/docs/4.5/utilities/spacing/
What I'm trying to do is to save a custom form and after that be able to open it from the default page in for of a button, I have a form to create the custom forms, meaning, that in this page you are meant create a new .aspx page to be accessed through the default page, and i don't know how to create nor save it and I don't also know how to modify or update the default page to be able to access the custom .aspx pages saved.
This is what is meant to be on each created .aspx file (This is an example, this is generated on one of these pages)
<div id="MainContent_div1" class="panel">
<div id="Section 1" class="panel panel-warning">
<div class="panel-heading">Example</div>
<div class="panel-body">
<h3>Example</h3>
<p>Sample description</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test1">Test1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test2">Test2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test3">Test3</a>
</div>
</div>
</div>
</div>
<br>
<div id="Section Test1" class="panel panel-warning">
<div class="panel-heading"> Sample Section 1</div>
<div class="panel-body">
<h3>Sample Section 1</h3>
<p>Sample description 2</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample1">Sample1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample2">Sample2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample3">Sample3</a>
</div>
</div>
</div>
</div>
</div>
Any help, edits or suggestions will be much appreciated.
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.
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> <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;
}