I´m facing a problem with the new release of bootstrap 3.
Why vertical margin are lost between some elements in the new version?
I´m migrating from v2.3, and now, a lot of things are going wrong.
In the example below, there is no margin between the panel and the form
This works fine in v2. Is there a workaround for this in v3?
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" id="search" name="search" placeHolder="Search" type="text" />
</div>
<input type="submit" class="btn btn-primary" value="Search" />
</form>
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>Item No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
The Result:
I don't know why but you can fix this with :
.form-inline+.panel {
margin-top: 10px;
}
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
I have a form, I tried to do it myself but did not find how to make the fields in a row (horizontally). I am very grateful because I spent a lot of time and did not find a solution.
My view business.blade.php
#extends('layouts.layout')
#section('title')Бізнес#endsection
#section ('main_content')
<h1>Бизнес</h1>
<p>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Mail</th>
<th scope="col">Website</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
#foreach ($business as $singleBusiness)
<tr>
<td>{{ $singleBusiness->name}}</td>
<td>{{ $singleBusiness->mail}}</td>
<td>{{ $singleBusiness->website}}</td>
<td><a href="/delete/{{ $singleBusiness->id }}">
<button class="btn btn-danger btn-delete">Delete</button></a></td>
</tr>
#endforeach
</tbody>
</table>
</p>
<form method="post" action="/business">
{{ csrf_field() }}
<fieldset>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label for="name" class="sr-only"></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="col-sm-3 my-1">
<label for="mail" class="sr-only"></label>
<input type="text" class="form-control" id="mail" name="mail" placeholder="Mail">
</div>
<div class="col-sm-3 my-1">
<label for="website" class="sr-only"></label>
<input type="text" class="form-control" id="website" name="website" placeholder="Website">
</div>
<button type="submit" class="btn btn-outline-warning mb-2">Додати</button>
</div>
</fieldset>
</form>
#endsection
CSS:
.container {
display: flex; // Distribute horizontally
flex-wrap: wrap; // If elements overflow the width of the container, put below
align-items: center; // Align items vertically
}
This will make the container distribute its contents horizontally. The "align-items: center" style is optional, it will align elements vertically.
I see you use tables, I don't recommend using tables, they are awful for responsiveness. Instead use flex, like this:
<style>
.row {
display: flex; // Distribute horizontally
}
.row > .column {
flex: 1; // All columns same width
// or
flex: 0 0 25%; // Each column 25%
}
</style>
<div class="row">
<div class="column">Name</div>
<div class="column">Mail</div>
<div class="column">Website</div>
<div class="column">Delete</div>
</div>
<div class="row">
<div class="column"><input></div>
<div class="column"><input></div>
<div class="column"><input></div>
<div class="column"></div>
</div>
You can also use bootstrap rows and columns, but I explain how to accomplish the same by yourself.
I have a search input and then an html table like this:
<form action="/providers/search" method="get">
<div class="field has-addons">
<div class="control">
<input class="input" name="q" type="text" placeholder="Search for every columns">
</div>
<div class="control">
<button type="submit" class="button is-primary">Search</button>
</div>
</div>
</form>
<table class="table is-bordered is-striped is-narrow is-fullwidth" >
<thead>
<tr>
<th>Name</th>
<th>Website</th>
<th>Login</th>
<th>Password</th>
<th>Email</th>
<th>Description</th>
<th></th>
</tr>
</thead>
...
</table>
the problem is the search input is stack directly on the html table, i think the .field class doesn't create the margin between input and table.
here is what i'm getting:
is there something wrong?
Are you perhaps using float on the elements inside the form? That could be the reason why the form/container element isn't having the correct height.
Quickfix is using overflow: hidden on the form/container element.
Cleaner fix is using clearfix see What is a clearfix?
Other option is to use flexbox instead of float elements depending on your which browser you need to support.
If I'm going to the wrong direction please provide the CSS you use.
I would like my text box and search button to look like this:
-------------------- -------
| Text Box | | BTN |
-------------------- -------
I am using this reference.
Here is how mine is rendered:
Here is my CSHTML:
<div style="display:inline-block; float: right">
<div style="float:right;">
#Html.TextBox("date", null, htmlAttributes: new { #class = "form-control datepicker" })
</div>
<div style="float:right; margin-right: 10px">
<input type="submit" value="Search" class="btn btn-primary top-margin" />
</div>
</div>
I know that inline CSS with HTML isn't preferred, and that I should separate out the CSS from the HTML, but for right now I just want to get this to render properly and then I will separate it out.
Any help is appreciated.
Thank you.
I assume this is what you want. The .example is just a wrapper, you only need its contents.
.example {
width: 50%;
margin: 50px auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="example">
<div class="input-group">
<input type="text" class="form-control" placeholder="text box..." id="search-box" aria-describedby="search-label">
<label for="search-box" id="search-label" class="input-group-addon btn">Search</label>
</div>
</div>
Note: I made use of Twitter Bootstrap classes because it seems you are already loading it in your project. This can be easily done without Bootstrap, but it would mean unnecessary CSS if you load Bootstrap.
Use table (with bootstrap 3):
<table class="table table-bordered table-hover">
<tbody>
<tr>
<td>
<button type="button" class="btn btn-default">button</button>
</td>
<td>
<input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
</td>
</tr>
</tbody>
I use modal to show table:
<div class="modal-body">
<form class="form-horizontal">
<label><h5>dev</h5></label>
<input type="text" class="input-xlarge" id="dconDev">
<label><h5>speed</h5></label>
<input type="text" class="input-xlarge" id="dconSpeed">
<input type="button" class="btn" id="dconBut" onclick="$('#appBlock').fadeIn('normal'); $('#dcon').show(); addPort('dcon',$('#dconDev').val(),$('#dconSpeed').val())" value="Добавить">
<table class="table table-condensed">
<thead>
<th>lbl</th>
<th>edizm</th>
<th>id</th>
<th>a</th>
<th>b</th>
<th>en_spar</th>
<th>spar</th>
<th>en_period</th>
<th>peiod</th>
</thead>
<tbody id="dconTable">
<th><input type="text" id="lbld"></th>
<th><input type="text" id="edizmd"></th>
<th><input type="text" id="idd"></th>
<th><input type="text" id="ad"></th>
<th><input type="text" id="bd"></th>
<th><input type="text" id="en_spard"></th>
<th><input type="text" id="spard"></th>
<th><input type="text" id="en_periodd"></th>
<th><input type="text" id="periodd"></th>
</tbody>
</table>
</form>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
How can I make modal expand to table size, or fit the table to modal borders? I tried to edit modal section in bootstrap.css but new position of modal is not at center. Also I tried to add something like a class="span4 to tags inside table, which seems doesn't do anything.
Thanks.
Suppose the modal width is 600px. To position the modal in center , use
.modal {
left: 50%;
margin-left: -300px; (negative of half of it's width;)
}