1
I’m having a hard time positioning controls on the bootstrap page. I wish I wasn’t resorting to external CSS resources, because that would take away the reason of being bootstrap. What I mean is:
1) I would like to position a certain control not pasted on the top of the screen, but so, as if it were a CSS and I would use a top:10px or 15px and so on.
2) I am also having difficulty positioning to the left of the margin, as a left in pure CSS. I made a table and populated the table and it was in the middle of the page, giving a space to the right and left. But I put a textbox control on top of the table and it pasted in the left margin, like, a 0px and there is that ugly appearance, with a grid(table) in the center and the textbox well pasted in the margin.
I looked in the bootstrap documentations that I have about these things and saw none of this. I only saw how to create buttons, Tables and etc... I know that the documentation is extensive and I don’t have everything, but I confess that I didn’t see anything about it. Could someone give me the path of stones? That is, where to look for these resources and more? I thank you already.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pesquisa</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen" />
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Pesquisa/Pesquisa.js"></script>
</head>
<body>
<form role="form">
<div class="form-group col-md-6">
<input type="text" class="form-control col-md-4" id="txtPesquisar" name="Pesquisar" placeholder="Entre com um email"/>
</div>
<div class="form-group col-md-6">
<input id="btnGravarCadastro" type="button" class="btn btn-success col-md-4" value="Pesquisar" onclick=" return carregaGrid();" />
</div>
</form>
<div id="tabela" class="container">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Nome</th>
<th>E-mail</th>
<th>Endereço</th>
<th>Bairro</th>
<th>Cidade</th>
<th>Estado</th>
<th>Telefone</th>
<th>Celular</th>
</tr>
</thead>
<tbody id="tbcadastro">
</tbody>
</table>
</div>
</body>
</html>
Jquery that mounts tbody from table
function carregaGrid() {
var str = "";
var email = jQuery.parseJSON('{ }');
$.ajax({
url: '/Pesquisa/PesquisaCadastro',
datatype: 'json',
contentType: "application/json; charset=utf-8",
type: "POST",
data: JSON.stringify({ _email: $('#txtPesquisar').val() }),
success: function (data) {
$(data.result_pesquisa).each(function(){
str += '<tr>';
str += '<td>' + this.nmcadastro + '</td>';
str += '<td>' + this.email_cadastro + '</td>';
str += '<td>' + this.end_cadastro + '</td>';
str += '<td>' + this.bairro_cadastro + '</td>';
str += '<td>' + this.cidade_cadastro + '</td>';
str += '<td>' + this.uf_cadastro + '</td>';
str += '<td>' + this.tel_cadastro + '</td>';
str += '<td>' + this.cel_cadastro + '</td>';
str += '</tr>';
})
$('#tbcadastro').html(str);
},
error: function (error) {
}
});
}
You could release the source code to take a look at it so it’s easier to help you.
– Conrado Basso
edited together
– pnet
You have not created a . css of yours to position the components on the screen ?
– Conrado Basso
Look at this fiddle: http://jsfiddle.net/aymone/LnE5h/, if that’s what you want, with an answer. As for CSS, you need to add a little yes, but it’s a little, "a brush stroke" in the details. Bootstrap is not a tool that will bring you all the answers, but it takes care of "thick".
– Marcelo Aymone
i was able to solve this problem by placing everything inside a <div class="container text-center" style="margin: 100px;"> That is, defining in the container what is the margin... I did not to what point is correct, but I could not do only with "Row" and "col". So far it is working of good rsss. Also hit me a lot with the same doubt. I hope for you also work.
– user51881