css positioning baseline - css

I would like to have the dropdown at the same baseline level of Btn1-2 and Btn3 above, but within the cell. Basically the opposite as what it is now. What am I missing? Thanks
<table style="width:100%">
<tr style="border:1px solid #000">
<td>
<div style="position:relative">
<input type="button" value="Bt1" />
<input type="button" value="Bt2" />
<div style="position:absolute; top:0; right:0;">
<input type="button" value="Btn3" /> <br />
<select>
<option>Hello</option>
</select>
</div>
</div>
</td>
</tr>
</table>

That's how you should do this:
<table style="width:100%">
<tr style="border:1px solid #000">
<td>
<div style="float:left;">
<input type="button" value="Bt1" />
<input type="button" value="Bt2" />
</div>
<div style="float:right;">
<input type="button" value="Btn3" />
<select>
<option>Hello</option>
</select>
</div>
</td>
</tr>
</table>
Set float for the two divs. Here is the demo: http://jsfiddle.net/naveed_ahmad/DnWWy/

Change the div style from position:absolute; to position:relative; which will keep it inside the cell.

You can try this one.
<table style="width:100%">
<tr style="border:1px solid #000">
<td>
<div style="position:relative">
<input type="button" value="Bt1" />
<input type="button" value="Bt2" />
<div style="position:absolute; top:0; right:0;">
<input type="button" value="Btn3" />
<select>
<option>Hello</option>
</select>
</div>
</div>
</td>
</tr>

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>

Bootstrap 4.5 text-nowrap not working as expected in table

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!

How to align left for a text outside a table with CSS

I am trying to align the text "Filter By:" lefts the table. For the margin, it may not work when the windows screen has been resized (responsive). I tried the text-align: left or center but it didn't work as my expected.
Actually, the div element can be changed to another one to make it work.
Here is the Fiddle link:
https://jsfiddle.net/a26jsLg5/
See the following screen-shot of how it should look like:
.searchType table {
border: 1px solid #A6A6A6;
margin: 0px auto;
}
<TD style="VERTICAL-ALIGN: text-top">
<DIV>Filter by:</DIV>
<DIV class=searchType>
<TABLE>
<TBODY>
<TR>
<TD>
<INPUT type=radio CHECKED value=FullMap />
<LABEL>Com 1</LABEL>
</TD>
<TD>
<INPUT type=radio value=MissingCourses />
<LABEL>Com 2</LABEL>
</TD>
<TD>
<INPUT type=radio value=NeedToLearn />
<LABEL>Com 3</LABEL>
</TD>
</TR>
</TBODY>
</TABLE>
Just do a small correction in your css. Remove margin: 0 auto form your .searchType table css
.searchType table {
border: 1px solid #A6A6A6;
}
<TD style="VERTICAL-ALIGN: text-top">
<DIV class="filterLabel">Filter by:</DIV>
<DIV class=searchType>
<TABLE>
<TBODY>
<TR>
<TD>
<INPUT type=radio CHECKED value=FullMap />
<LABEL>Com 1</LABEL>
</TD>
<TD>
<INPUT type=radio value=MissingCourses />
<LABEL>Com 2</LABEL>
</TD>
<TD>
<INPUT type=radio value=NeedToLearn />
<LABEL>Com 3</LABEL>
</TD>
</TR>
</TBODY>
</TABLE>
take a look at this .https://codepen.io/jayakrishnancn/pen/WjBpZa
1st method with javascript
change this line
<DIV>Filter by:</DIV>
<DIV class=searchType>
to
<DIV class="searchType">
<DIV id="filter_text" style="margin:0 auto">Filter by:</DIV>
and add this script to page
<script>
$('#filter_text').width($('#filter_text').next().width());
</script>
2nd id u know the maximum width of table in advance then use this
<DIV class='searchType' style="width: 200px;margin:0 auto">
<DIV>Filter by:</DIV>
<TABLE style="width:100%">
here no script is needed, also "filter by" will stay in the right place (in previous method "filter by" will be placed in left and move to right only when jquery funtion run.
Yes you can use the <caption> element for this. It goes inside your table element, you can then align it left.
.searchType table {
border: 1px solid #A6A6A6;
margin: 0px auto;
}
table caption {
text-align: left;
}
<DIV class=searchType>
<TABLE>
<CAPTION>Filter by:</CAPTION>
<TBODY>
<TR>
<TD>
<INPUT type=radio CHECKED value=FullMap />
<LABEL>Full learning map</LABEL>
</TD>
<TD>
<INPUT type=radio value=MissingCourses />
<LABEL>Missed courses</LABEL>
</TD>
<TD>
<INPUT type=radio value=NeedToLearn />
<LABEL>Courses need to learn</LABEL>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
More about the caption element: https://developer.mozilla.org/en/docs/Web/HTML/Element/caption

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

How can I get rounded corners to fit over other content?

I have been working on a dynamic page http://www.euroworker.no/order and I want my lovely rounded corners box (border-radius, not images) to fit over the generated products and ordrekommentar boxes. This is dynamic so I have set the HTML, and parent element of this div to height:100%;, but it just extends to the bottom of the page.
How can I get the rounded corners box to fit over the generated content?
Pris
Antall
<tr class="even first">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Plantronics-CS361N.11">
<img src="upload/productimage/11-22-1.jpg?1249726571" alt="Plantronics CS361N" />
</a>
</td>
<td class="cartName">
<div>
Plantronics CS361N
<small>(‏Trådløse - duo)</small>
</div>
</td>
<td class="cartPrice discount">
11950.-
<div class="subTotalCalc">
5 x <span class="basePrice">2988.-</span><span class="actualPrice">2390.-</span>
</div>
</td>
<td class="cartQuant">
<input name="item_984" class="text" type="text" value="5"/>
</td>
</tr>
<tr class="odd">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Target-7050CC-Duo-UNC.7">
<img src="upload/productimage/7-250-1.jpg?1251022192" alt="Target 7050CC Duo UNC" />
</a>
</td>
<td class="cartName">
<div>
Target 7050CC Duo UNC
<small>(‏Med ledning - duo)</small>
</div>
<div class="productOptions">
<div class="nonEditableOption">
Skal tilkobles:
Cisco
</div>
<div class="productOptionsMenu">
Endre valg
</div>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1124.-</span><span class="actualPrice">899.-</span>
</td>
<td class="cartQuant">
<input name="item_997" class="text" type="text" value="1"/>
</td>
</tr>
<tr class="even last">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Sennheiser-MM-400.626">
<img src="upload/productimage/626-984-1.jpg?1264593017" alt="Sennheiser MM 400" />
</a>
</td>
<td class="cartName">
<div>
Sennheiser MM 400
<small>(‏Bluetooth headset)</small>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1938.-</span><span class="actualPrice">1550.-</span>
</td>
<td class="cartQuant">
<input name="item_998" class="text" type="text" value="1"/>
</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">
Tilnærmet fraktpris:
</td>
<td class="amount shippingAmount">124.-</td>
<div id="roundbigbox">
<td id="cartUpdate"><!--<input type="submit" class="submit" value="Oppdater" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">mva:</td>
<td class="amount taxAmount">3600.-</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">Totalt:</td>
<td class="subTotal">18123.-</td>
<div id="eavContainer_556782" class="eavContainer">
<p class="required ">
<label for="product___specField_6"><span>Ordrekommentar:</span></label>
<fieldset class="error">
<div class="textarea" style="margin-left: 0;">
<textarea id="product__708_specField_6" name="specField_6" class="tinyMCE"></textarea>
<div class="errorText hidden"></div>
</div>
<div class="errorText hidden"></div>
</fieldset>
</p>
</div>
CSS
roundbigbox {
padding:10px;
width:760px;
height:1%;
border-width:1px;
border-radius:10px;
border-color:#dddddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:-1;
position:relative;
overflow:hidden;
}
<div id="products">
<div class="product">...</div>
<div class="product">...</div>
</div>
#products
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position: relative;
height: 1%;
overflow: hidden;
padding: 10px;
}
You won't get the border-radius to work in IE but the box will extend dynamically to accommodate x amount of products in IE6+, FF, S, C & O

Resources