Bootstrap 4.5 text-nowrap not working as expected in table - css

How can I remove the space between two columns? I need the below-highlighted space to be removed.
I tried text-nowrap but didn't work as expected.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
</style>
<div class="container shadow p-3 sm-5 bg-white rounded">
<form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
<h2>Register</h2>
<hr />
<table class="table table-borderless text-nowrap">
<tbody>
<tr>
<td>
<label for="firstnameid">First Name: </label>
</td>
<td>
<input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
</td>
</tr>
<tr>
<td>
<label for="lastnameid">Last Name: </label>
</td>
<td>
<input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
</td>
</tr>
<tr>
<td>
<label for="emailid">Email: </label>
</td>
<td>
<input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
</td>
</tr>
<tr>
<td>
<label for="passwordid">Password: </label>
</td>
<td>
<input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
</td>
</tr>
</tbody>
</table>
<hr />
<button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
<br /><br /><br />
<span id="login_link"> Login Here </span>
<hr />
</form>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>

As described in this answer, you can just define a small width like 1px for your first column, because table cells are expanded to the smallest size to fit its content, which will automatically remove this whitespace.
Here is your adjusted code example:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
table tr td:first-child {
width: 1px;
}
</style>
<div class="container shadow p-3 sm-5 bg-white rounded">
<form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
<h2>Register</h2>
<hr />
<table class="table table-borderless text-nowrap">
<tbody>
<tr>
<td>
<label for="firstnameid">First Name: </label>
</td>
<td>
<input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
</td>
</tr>
<tr>
<td>
<label for="lastnameid">Last Name: </label>
</td>
<td>
<input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
</td>
</tr>
<tr>
<td>
<label for="emailid">Email: </label>
</td>
<td>
<input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
</td>
</tr>
<tr>
<td>
<label for="passwordid">Password: </label>
</td>
<td>
<input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
</td>
</tr>
</tbody>
</table>
<hr />
<button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
<br /><br /><br />
<span id="login_link"> Login Here </span>
<hr />
</form>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>
Good luck!

Related

Background move to left when I open a modal-lg

When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
This is what I tried and it works perfectly. You do an external CSS or internal CSS. Your choice. If you want internal. Just do a <style> insert the CSS here </style
CSS:
body:not(.modal-open){
padding-right: 0px !important;
}
Internal CSS:
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>
Full code:
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
enter code here
</div>
</div>
</div>
#{count++;}
// this is internal css
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>

How to remove line from row?

How to remove the line from the table rows? See below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br /><br /><br />
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
</div>
How to remove the line from the table rows? See Above
Use table-borderless class to table tag. Reference here.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br /><br /><br />
<table class="table table-borderless">
<tbody>
<tr style="text-align: center;" class="">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
</div>

How to inline input and button inside table in Bootstrap

I am trying to solve how I can get input field and a button on the same line inside a table.
This is what I want to be inline:
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td>
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<input type="text" name="numDays" id="numDays" class="numDays">
<button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
</form>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>what</th>
<th>huh</th>
<th>wait</th>
</tr>
</thead>
<tbody>
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td>
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<div class="input-group">
<input type="text" name="numDays" id="numDays" class="numDays form-control">
<span class="input-group-btn">
<button type="submit" name="button" class="btn btn-success" id="bt">Click <i class="fa fa-angle-right"></i></button>
</span>
</div>
</form>
</td>
</tr>
</tbody>
</table>
<tr class="no-border">
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td style="width:70%;">
<form class="form-inline" action="add-to-cart/{{this._id}}" method="get">
<input type="text" name="numDays" id="numDays" class="numDays">
<button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button>
</form>
</td>
</tr>

Page refreshing when attempting to save TextBox values

I have a table with TextBoxes and I set an UpdatePanel to the table and set a button that should save my new TextBoxes' value to the database as a trigger. But, when I press the button the page refreshes.
<%# Page Title="" Language="C#" MasterPageFile="~/MaestroMaster.master" AutoEventWireup="true"
CodeFile="ProjectDetails.aspx.cs" Inherits="Default" EnableEventValidation="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<style type="text/css">
.style1
{
height: 68px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div class="cntr">
<h1>
פרטי הלקוח
</h1>
</div>
<br />
<asp:UpdatePanel ID="CustomerUpdatePanel">
<ContentTemplate>
<table id="CustomerDetailsTBL" class="table">
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoID" type="text" class="form-control" runat="server" maxlength="9">
<span class="input-group-addon">ת.ז</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoAddress" type="text" class="form-control" runat="server" maxlength="30">
<span class="input-group-addon">כתובת</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoFirstName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם פרטי</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoCity" type="text" class="form-control" runat="server" maxlength="15">
<span class="input-group-addon">עיר</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoLastName" type="text" class="form-control" runat="server" maxlength="15">
<span class="input-group-addon">שם משפחה</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoEmail" type="text" class="form-control" runat="server">
<span class="input-group-addon">דוא"ל</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoPhone" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">טלפון</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoFax" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">פקס</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoMobile" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">טלפון נייד</span>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoArchitectName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם האדריכל</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoArchitectMobile" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון אדריכל</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoContractorName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם הקבלן</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoContractorPhone" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון קבלן</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoSupervisorName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם המפקח</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoSupervisorPhone" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון מפקח</span>
</div>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ContentPlaceHolder3_SaveCustomerDetailsBTN" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
You do not have any button inside the UpdatePanel to trigger a dynamic update of the UpdatePanel content only, and then the control id that make the trigger not exist ContentPlaceHolder3_SaveCustomerDetailsBTN in this code you give

input tag bigger size and text in input tag centered vertically

This is the form I need to do:
For now I'm in this point:
As you can observe I need to create the input buttons bigger. Otherwise visually it will not work. My question would be how to create the input buttons bigger vertically and the input text stay centered vertically in middle of the box.
CSS solution would be the best.
This is my html code if it helps:
<form name="bookingform" action="form-to-email.php" method="post">
<div id="form_box" class="gradient">
<div id="center_box">
<h3>WANT TO BOOK ME?</h3>
<div id="form_data">
<br>
<table>
<tr>
<td><input type="text" value="Company name" name="company" /></td>
<td class="tdright"><input type="text" value="Name" name="name" /></td>
</tr>
<tr>
<td><input type="text" value="Telephone" name="telephone" /></td>
<td class="tdright"><input type="text" value="Email" name="email" /></td>
</tr>
<tr>
<td><input type="text" value="Booking date" name="date" /></td>
<td><input type="button" /></td>
</tr>
</table>
</div>
<div id="form_text">
<br>
<textarea rows="10" cols="40" name="message">Your text...</textarea>
<input type="submit" value="SEND" name="submit" />
</div>
<input type="image" src="" name="Send" />
</div>
</div>
</form>
input[type=button] {
height: 35px; /* increase the height */
line-height: 35px; /* vertically align the text */
}
DEMO

Resources