I am having some issues with a div not responding the way I believe it should be.
I have this code;
<div class="wrapper">
<div class="container">
<div class="col-md-12">
<div class="header-form" style="border: 2px solid purple; margin: 1%;">
<div class="row">
<form ng-controller="GetQuery" ng-submit="submitForm()">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Starbucks, McDonalds, etc..</label>
<input ng-model="form.keyword" type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">City, State or Zip..</label>
<input ng-model="form.location" type="text" class="form-control">
</div>
</div>
<div class="col-md-2">
<button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
</div>
</form>
</div>
</div>
</div>
</div>
This works correctly. However all I know want to do, is fix this div that contains the form into position: fixed, so when you scroll the div continues to stay in view. However, when I had an in-line style
style="position: fixed;"
and I inspect it with a mobile view the div defaults to only using half the page. In a desktop view it works as it should.
What am I missing?
Related
I'm using Bootstrap 3 and I have set up this grid for my webpage:
<div class="container">
<div class="header">
<div class="top-nav">
<div class="row">
<div class="col-1">
<img src="https://sitename.com/logo.jpg">
</div>
<div class="col-7 mid-nav">
<!-- Search box & Navbar comes here -->
</div>
<div class="col-1" style="margin-top:30px !important;">
<i class="fa fa-shopping-cart fa-4x sabad-kharid"></i>
</div>
<div class="col-3">
<form method="POST" action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
And the result is shown in this:
As you can see the Bootstrap form does not appear in the col-3 class and it appears at the below of this row. However it should be placed at the left side in the div with class of col-3.
So what's going wrong here? How can I solve this issue?
You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.
When making nested columns with bootstrap in asp.net using webforms, how would you span the entire child?
Example:
<div class="row">
<div class="col-md-3">
<div class="row">Stuff</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
stuff
</div>
<div class="col-md-6">
stuff
</div>
</div>
<div class="row">
<div class="col-md-12">
stuff
</div>
</div>
</div>
</div>
Here is my exact code:
<div class="row" style="margin-top: 5px">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="">Destination City:</span>
<input type="text" class="form-control" id="DestinationCity" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="">ETA:</span>
<input type="text" class="form-control" id="ETA2" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row" style="margin-top: 5px">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon" id="">B/L#:</span>
<input type="text" class="form-control" id="BL" runat="server" placeholder="" aria-describedby="basic-addon1">
</div>
</div>
</div>
I am trying to make 2 columns of 6 with a column of 12 underneath it. The second column will not span the entire length of the two 6s.
I think I am missing something fundamental about Bootstrap3's gridding system.
Link to image:
https://sutong-my.sharepoint.com/personal/joseph_sutongctr_com/_layouts/15/guestaccess.aspx?docid=1070ed3a0aabe43739b7cdda19e136793&authkey=AZFGucSF7ReMr4cvabz6fDQ
You HTML work perfectly as to what you wanted... 2 column followed by 1 columns spanning the entire page. You need to check if another div is wrapping it causing it to behave differently. Try to comment your start and ending div, you'd be surprised how many of us get confused.
Problem turned out to be a limit Visual Studio puts in Site.css
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
Answer found in Stack Question
I'm having trouble when displaying a searchbar in the right side of a header.
What I'm doing is the following:
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type="submit" class="btn btn-default">Submit</button>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<h2>Perfiles</h2>
</div>
</div>
</div>
Here's a fiddle to illustrate my problem:
https://jsfiddle.net/DTcHh/16632/
EDIT:
Ok, here's a picture with the problem:
What I want is that both the sarch button and the input are in the same row.
Your search input field has width: 100% and display:block. Fixing that should solve the problem. Try adding following to your CSS:
.form-control {
width: auto;
display:inline-block;
}
Fiddle.
Got it working!
The trick was in the use of class="form-inline"
Here is the code to make it work:
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type="submit" class="btn btn-default">Submit</button>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<h2>Perfiles</h2>
</div>
</div>
And here is the picture of what I was actually looking:
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
I have the following code, meant to vertically align a button in my Bootstrap form section:
HTML:
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label for="isbn">ISBN# (10 or 13)</label>
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
CSS:
.form-isbn {
display: table-cell;
vertical-align: bottom;
float: none;
}
For some reason, it's still not working as it should. Screenshot attached shows what is happening (seems that vertical alignment is...top by default? I need the button to sit at the bottom of the row to properly align with the input field that it's next to.
Any idea what the issue might be? I'm sort of dumbfounded, and I have looked at a couple similar questions here on SO, to no avail. :(
Try this one.
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
Hope this help.
*Try to disable the css you made for the .form-isbn
I came across this recently and wanted to achieve the same. One way to achieve with pure bootstrap classes is to push the input and button to a separate row and remove the bottom margin in the first row to bring the label as close to the input as before
<div class="form-group">
<div class="row">
<div class="col-md-9 mb-0">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button">Check ISBN</button>
</div>
</div>
</div>