We Keep Coding

How to pass a table values to a controller?

Brief Explanation:
I have a dynamic table in where I add Products that have ID,NAME,PRICE,COST and TOTAL.
With a drop-down list full of products when I click a button a product is added to the table
The table has inputs inside in order to set the quantity and the total based on the price of the product.
The thing is, when the table is done, I need to handle the table values in the controller to do some stuff in SQL.
I have read some other similar cases but I think none is like mine.
Example of my table with 1 product
<table id="tablaCompras" class="table table-striped table-responsive" cellpadding="0" cellspacing="0" name="tablaCompras">
<tbody>
<tr align="left">
<th scope="col">Número Artículo</th>
<th scope="col">Artículo</th>
<th scope="col">Cantidad</th>
<th scope="col">Costo Unitario</th>
<th scope="col">Total</th>
<th scope="col">Precio Unitario</th>
<th scope="col">Impresión</th>
<th scope="col">Eliminar</th>
</tr>
<tr id="0" align="left"><td>31</td><td width="100%">ANILLO DE PLATA 030269</td><td> <input type="text" id="txtCantidadTabla0" value="0.00" name="txtCantidadTabla" 0min="1" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""></td>
<td> <input type="text" id="txtCostoTabla0" name="txtCostoTabla0" value="89.7" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""> </td>
<td> <input id="txtTotalTabla0" type="text" style="background: transparent; border:none; align:center; max-width:100px;" readonly=""> </td>
<td> <input type="text" id="txtPrecioTabla0" name="txtPrecioTabla0" value="269.9" style="background: transparent; border:none; align:center; max-width:100px;" required=""></td>
<td> <img src="../Img/imprimir.png" style="width:30px; height:30px;"></td><td> <img src="../Img/borrar.png" onclick="deleteRow(0)" style="width:30px; height:30px;"></td>
</tr>
</tbody>
</table>
I have my table in a Html.BeginForm like this:
#using (Html.BeginForm("Prueba", "AltaCompra", FormMethod.Post))
{
}
In my controller I tried to receive it like this:
[HttpPost]
public ActionResult Prueba(FormCollection collection)
{
}
But Tables cannot be passed through to a formcollection.
Any clues of how can I handle the information of the table.

You need update your name for input with format name="#("txtCantidadTabla[" + #i + "]")", incase you add new row by javascript/jQuery you must add name with this format.
#for (var i = 0; i < 5; i++) // I assume the total product
{
<tr id="0" align="left">
<td><input type="hidden" name="productid" value="31" />31</td>
<td width="100%">ANILLO DE PLATA 030269</td>
<td> <input type="text" id="#("txtCantidadTabla[" + #i + "]")" value="0.00" name="#("txtCantidadTabla[" + #i + "]")" 0min="1" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""></td>
<td> <input type="text" id="#("txtCantidadTabla[" + #i + "]")" name="#("txtCostoTabla[" + #i + "]")" value="89.7" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""> </td>
<td> <input id="txtTotalTabla0" type="text" style="background: transparent; border:none; align:center; max-width:100px;" readonly=""> </td>
<td> <input type="text" id="#("txtCantidadTabla[" + #i + "]")" name="#("txtPrecioTabla[" + #i + "]")" value="269.9" style="background: transparent; border:none; align:center; max-width:100px;" required=""></td>
<td> <img src="../Img/imprimir.png" style="width:30px; height:30px;"></td>
<td> <img src="../Img/borrar.png" onclick="deleteRow(0)" style="width:30px; height:30px;"></td>
</tr>
}
And get data by FormCollection in controller as
[HttpPost]
public ActionResult Prueba(FormCollection collection)
{
for (var i = 0; i < 5; i++)
{
var txtCantidadTabla = collection["txtCantidadTabla[" + i + "]"];
var txtCostoTabla = collection["txtCostoTabla[" + i + "]"];
var txtPrecioTabla = collection["txtPrecioTabla[" + i + "]"];
// handle your logic here
}
return View();
}

Based on the id of the <tr> matching the last character of the name attribute for the input elements you probably need to modify your code to generate the name attribute to have array notation around the index value such as name="txtCostoTabla[0]" where the index of the row is the hard coded index if you want multiple values submitted in the form POST with the same name.
Otherwise as suggested in a previous comment handle the form submit with JavaScript and build an object to pass to the Controller by iterating the table rows.

Setting "Active" from carousel in html code

I have a project that contains several views with some "carousel".For example, this is one of the pages with some buttons. p1
and when I click, for example, at the first button "Ver mais" it shows this p2
So far so good! But if I get out of this "window" and click on another button "ver mais", it happens this, that is, the slide doesn't start on the first image.p3
My html code is this(I only post the code from two galleries of images because I have a few and it would become too extensive):
window.onload = function() {
$(document).ready(function() {
$('#data').after('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
}
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
width: 960px;
margin: 40px auto;
}
h2 {
font-size: 21px;
color: #008000;
font-weight: normal;
}
#ancora {
text-align: right;
color: black;
position: absolute;
top: 205px;
right: 200px;
text-decoration: underline;
}
#customers {
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
background-color: black;
color: white;
}
th,
td {
padding: 5px;
text-align: center;
}
.center {
text-align: center;
}
.btn-info {
color: #fff;
background-color: rgba(0, 128, 0, 1);
border-color: rgba(0, 0, 0, .075);
cursor: pointer !important;
}
.btn {
text-align: left;
}
.btn-info:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:active:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:focus {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.container {
width: auto;
height: auto;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
* {
-webkit-box-sizing: content-box;
}
.imagem {
width: 150px;
height: 150px;
object-fit: cover;
}
#data tr {
display: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#data td,
#data th {
border: 1px solid #ddd;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
background-color: black;
color: white;
}
td {
width: 350px;
text-align: center;
}
a:-webkit-any-link {
color: white;
cursor: pointer;
text-decoration: underline;
}
#nav {
margin: 0 auto;
float: none;
display: table;
}
#nav a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
#nav a.active {
background-color: #008000;
color: white;
border: 1px solid #008000;
}
#nav a:hover:not(.active) {
background-color: #ddd;
}
#nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.carousel-control.right {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Projetos de Jardim & Lazer</h2>
<a id="ancora" href="/Home/Index">Página Inicial</a>
<table id="data" style="width:100%">
<tbody>
<tr>
<th></th>
<th><strong>Tipo de relva</strong></th>
<th><strong>Descrição</strong></th>
<th><strong>Localidade</strong></th>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
<td><strong>DOMO® SCALA (PHILI)</strong></td>
<td>Boticas Hotel Art & Spa</td>
<td>Boticas - Vila Real</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Boticas Hotel Art & Spa</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® SCALA (PHILI)
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
<td><strong>DOMO® MONZA</strong></td>
<td>Centro Escolar</td>
<td>Seia - Guarda</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Centro Escolar de Seia</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® MONZA
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Any suggestions? Another question, where do I change the time of transition from an image to another?

HTML view page save as PDF using roatativa

I have following image for the Create_Brochure ActionResult in Brochure Contrller Class
Here the whole URL of that Action
http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false
Once I click I want to save this view page as PDF , to do that I followed this tutorial
So this is the cshtml view page , so it doesn't have a model class
#model IEnumerable<int>
#{
ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
<title>Create a Template</title>
</head>
<body>
<div style="width:100%; padding:10px; float:left;">
<table width=1100 cellpadding=10>
<tr>
<td colspan="2">
<div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
Bank Brochure
</div>
</td>
</tr>
#if (Model.Contains(1))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
<h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
</div>
</td>
</tr>
}
#if (Model.Contains(2))
{
<tr>
<td colspan="2" style="background-color:lightgrey">
<div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
<h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
<p style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</td>
</tr>
}
#if (Model.Contains(3))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
<h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
</div>
</td>
</tr>
}
#if()....
<tr>
<td colspan="2">
<div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
Copyright © 2015 Zoo Group , Solution by kelum.
</div>
</td>
</tr>
</table>
</div>
<br />
<button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$('#btn_sumbit').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("DownloadActionAsPDF", "Brochure")',
dataType: "text",
data: null,
success: function (data) {
},
error: console.log("it did not work"),
});
});
</script>
}
this is controller class method to save to PDF
[HttpPost]
public ActionResult DownloadActionAsPDF()
{
string path = Request.Url.ToString();
//Request.Url.ToString() using to get current page URL
return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
}
but once I click this button it doesn't save to PDF file,

As i already commented that your code is calling the same Method again and again..
You can do the same thing by using ActionAsPdf and point it to the Create_Brochure Action method of yours
Ex:-
public ActionResult DownloadActionAsPDF()
{
return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
}
public ActionResult Create_Brochure()
{
//Your logic....
return View()
}
and in your view page no need of a button or a Ajax call can be done by a anchor tag
View:-
<a href="#Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>

Show data from Model(Dictionary) in html table using jquery

I am using ASP.Net Razor , ASP.NET MVC and jQuery.
I have a dictionary in Model and a drop down list in html table. What I want is , when I select "ALM" option in drop down list , I want to show some data from dictionary in id="leftValues" using jquery .
My code:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model Dictionary<string,string>
<style type="text/css">
#myTable {
position:absolute;
top:10%;
left:30%;
}
#heading {
text-align: center
}
#SelectPlatform {
text-align: center;
position: absolute;
top: 10%;
}
</style>
<table id="myTable">
<tr>
<th id="heading"> Select Platform </th>
<th id="heading"> Available Options</th>
<th></th>
<th id="heading"> Selected Options</th>
</tr>
<tr>
<td>
<select id="SelectPlatform">
<option>Select Platform</option>
<option>ALM</option>
<option>Serena</option>
</select>
</td>
<td>
<div>
<select style="text-align: center; text-wrap:normal; width: 110%"; size="20%" id="leftValues" multiple >
// Here I want to show data from dictionary
</select>
</div>
</td>
<td>
<div>
<input style="width: 100%" type="button" id="btnLeft" value="<<" />
<input style="width: 100%" type="button" id="btnRight" value=">>" />
</div>
</td>
<td>
<div>
<select style="text-align: center; text-wrap:normal; width: 110%" id="rightValues" size="20%" multiple >
</select>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#SelectPlatform").change(function () {
var textValue = $("#SelectPlatform option:selected").text();
if (textValue == "Select Platform")
{
// some code
}
else if (textValue == "ALM")
{
// this is working
$("#leftValues").append('<option value=' + '"NoItem"' + ' >HI I am added </option>');
// this is not working
$.each(Model, function (key, value) {
alert(key);
alert(value);
$("#leftValues").append('<option value=' + '"NoItem"' + ' >HI I am also added </option>');
});
}
else if (textValue == "Serena")
{
// some code
}
});
}
});
</script>

So you need to move the Model values from the front end to the back end. Javascript cannot read ViewModel values as they are processed on the server. You can write them out into javascript though:
<script>
var dicMap = new Map();
#foreach (var kv in Model)
{
#:dicMap.set(#kv.Key, #kv.Value);
}
</script>
now change:
// this is not working
$.each(dicMap, function (key, value) {

Changing bootstrap's control label width?

Bootstrap has the following CSS:
.form-horizontal .control-label {
float: left;
width: 160px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
}
It makes my form look like this:
The labels are way off to the right.
Here is how I build the form:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="kez_header">
<table class="style1">
<tr>
<td>
<h4> Add Group
</h4>
</td>
<td align="right" valign="middle">
</td>
</tr>
</table>
<div id="new_group_view" class="form-horizontal">
<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
<div class="control-group">
<label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
<div class="controls">
<input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]">
<div placeholder="Password" id="fos_user_registration_form_plainPassword"></div>
</div>
</div>
<div class="control-group">
<label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
<div class="controls">
<input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style">
</div>
</div>
<div class="control-group">
<label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
<div class="controls">
<input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style">
</div>
</div>
</form>
</div>
</div>
</asp:Content>
How can I get this normal so that the labels start more like here:
http://bootstrap.stage42.net/doc/forms
Thanks

.form-horizontal .control-label width specifies the "how far would be last character of the label text from the left side of the parent container".
.form-horizontal .controls margin-left specifies the "how far would be left border of the field from the left side of the parent container".
This is simplified explanation but should give you enough understanding to take control over your styles.
So you should adjust .form-horizontal .control-label width and .form-horizontal .controls margin-left values proportionally, to move fields and labels inside the container. Proportionally because "space" between label and field should be preserved. Here is example:
.form-horizontal .control-label {
float: left;
width: 120px; /* changed from 160px to 120px */
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 140px; /* changed from 180px to 140px */
*margin-left: 0;
}