I am facing a layout problem when using overlay inside a td. Let me show my html.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="jquery-1.7.1.js">
</script>
<script type="text/javascript">
function alterControl() {
var $visibleCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayVisible");
var $hiddenCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayHidden");
$visibleCtrl.removeClass("divOverlayVisible").addClass("divOverlayHidden");
$hiddenCtrl.removeClass("divOverlayHidden").addClass("divOverlayVisible");
}
</script>
</head>
<body>
<table id="servicesTable">
<thead>
<tr>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblResult">
Result</label>
</th>
</tr>
</thead>
<tr id="ID1">
<td>
<input style="width: 100px;" id="txtName1" name="txtName1" type="text" value="Service1" />
</td>
<td>
<div class="overlayOuter">
<div id="ServiceTestResult1" class="divOverlayVisible">
<input type="text" value="This is static text" id="Testresult1" style="width: 40px;
height: 16px;" />
</div>
<div id="ServiceTestResultTestImage1" class="divOverlayHidden">
<img src="Validated_16.png" alt="Image not found" style="width: 16px; height: 16px;" />
</div>
</div>
</td>
</tr>
</table>
<input type="button" id="btnToggle" value="Alter" onclick="alterControl()" />
</body>
</html>
My CSS is like below
.overlayOuter
{
position:relative;
height:100%;
width:100%;
}
.divOverlayHidden
{
top:0px;
left:0px;
position:absolute;
visibility:hidden;
z-index:101;
}
.divOverlayVisible
{
top:0px;
left:0px;
position:absolute;
visibility:visible;
z-index:100;
}
The problem that I am facing is, table cell in my second column is getting outside the row. My idea was to show textbox or image at a time based on input. Please find the screenshots too which are uploaded in skydrive
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!130
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!131
Can anyone tell me how to solve this problem?
I can't see the images because I'm not member, sorry. But I've recreate the problem in a jsFiddle, and, if I remove position:absolute; from .divOverlayVisible it seems to work properly: Example
.divOverlayVisible {
top:0px;
left:0px;
/*position:absolute; I have removed this line */
visibility:visible;
z-index:100;
}
EDIT: If you need the position to make z_index work, you can change the value absolute to relative rather than remove it.
Related
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
I have an issue about some design. I want a div to be show only on mouseover from an icon, I've done this, but the content from the div is partially not included in the div.
To show you exactly how it is, here is a picture of the current thing :
http://img4.hostingpics.net/pics/878048issuePicture.jpg
So the div is the light orange rectangle under the arrow pointing down, but it should contain the icon and the text which is on its right (the (?) REQ and the 2 others). Those items are shown in same time as the div (on mouseover of the arrow), but they're not included in the div.
The code of those parts :
HTML :
<table class="table-center table" style="background-color:#FFFCF9">
<thead>
...
</thead>
<tbody>
<tr class="changeRequestSearch">
<td>
<img src="/assets/css/images/unroll-icon.png" ng-mouseenter="showSelectType()" />
<div class="selectType" id="selectType" ng-mouseleave="hideSelectType()">
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterReq" value="req" checked/> <img src="/assets/css/images/request-icon.png" /> REQ
</div>
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterEvol" value="evol" checked/> <img src="/assets/css/images/evolution-icon.png" /> EVOL
</div>
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterBug" value="bug" checked/> <img src="/assets/css/images/bug-icon.png" /> BUG
</div>
</div>
</td>
...
And the CSS :
.trHover:hover {
background-color:#f5f5f5;}
.nowrap {
white-space:nowrap;
}
.clear {
clear: both;
}
.changeRequestSearch td input {
width:100%;
}
.selectType {
visibility:hidden;
position:fixed;
background-color:#F5EBDE;
}
Here is a JSFiddle link, but here it does work (i've made some changes) : http://jsfiddle.net/D2RLR/6200/
try to set width for the dive like
.selectType {
width: 100px;
}
I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.
I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.
Here is a jsfiddle of the code.
How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.
You just need to tell the browser to ignore the floating set by the the div surrounding the table:
#divButtons{
clear:both;
}
#divButtons input[type="submit"]{
float:right;
}
Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.
Or something like this
#divButtons{ width:100%; float:left }
http://jsfiddle.net/9BBKp/
Here is demo
try this:
<form>
<div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>
<select name="cmbProducts" onchange="javascript:setTimeout('__doPostBack(\'cmbProducts\',\'\')', 0)" id="cmbProducts" style="width:250px;"></select>
</div>
<div style="padding-top: 50px;">
<hr />
<div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
</td>
</tr>
</table>
</div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
</td>
</tr>
</table>
</div>
</div>
<hr />
</div>
<div id="divButtons" style="text-align: center;">
<input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
<input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
</div>
</form>
and css:
.list-box {
width: 250px;
}
.selection-panel {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
align-content: center;
text-align: center;
}
#divButtons {
float:right;
clear:both;
}
i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.
Relevant CSS:
#BoardInput {
padding:0px;
width:100%;
height:100%;
}
#BoardSmiley {
min-width:100px;
width:20%;
padding:10px;
border-right:thin solid #4E6011;
border-bottom:thin solid #4E6011;
background-color:#C6E466;
}
#BoardCode {
border:thin solid #4E6011;
background-color:#C6E466;
padding:3px;
}
Relevant HTML:
<div id="BoardCode">
<button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button>
<button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button>
<button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button>
<button onclick="addLink();">Link</button>
<button onclick="addImage();">Bild</button>
</div>
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST">
<table id="Board">
<tr>
<td>
<textarea id="BoardInput" name="Text"></textarea>
<input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" />
</td>
<td id="BoardSmiley">
<?php
$BoardTemplate->showSmileys();
?>
</td>
</tr>
<tr colspan="2">
<td><input type="submit" value="OK" />
</tr>
</table>
</form>
The problem is that i want the "Code" Box at the top, the Smileys-Box at the right and the textarea at the left. And i want them to be fully adjusted to each other. However the textarea is 1px more intented to the right than the Code box above and 2px more intented to the top than the Smileys-Box on the right.
What am i doing wrong here?
EDIT:
jsFiddle: jsfiddle.net/SSxSN and an image:
Use:
resize:none;
in your css code in textarea.
Add negative margins for left and bottom, like this:
#BoardInput {
padding:0px;
width:100%;
height:100%;
margin: 0 0 -8px -1px;
}
http://jsfiddle.net/SSxSN/1/
which is almost right on Chrome and firefox but the problem is the position of the submit button on IE if too right than the css. Please check the code and help as soon as possible.
HTML &CSS Code you can find on the link http://jsfiddle.net/7vUW6/
i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width.
Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. please copy this code and run your system.
complete codings:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
<meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<script type="text/javascript">
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<style>
/*-- Reset CSS --*/
.wraper{
width:70%;
margin: 0px auto;
padding:0;
}
#field {
}
#ftext{
font-family: 'Capriola', sans-serif;
}
#btext{
font-family: 'Quando', serif;
font-weight:400;
}
#space{
padding-left:5%;
}
.submit{
padding-left:54%;
padding-right:60%;
clear:both;
}
#value{
color:#999;
}
textarea {
resize: none;
}
#noscrollbars {
overflow:hidden;
}
#inform{
color:#C00;
font-size:12px;
text-align:justify;
}
select{
color:#00F;
}
textarea{
border-right: #a9a9a9 1px solid;
border-top: #a9a9a9 1px solid;
border-left: #a9a9a9 1px solid;
border-bottom: #a9a9a9 1px solid;
color:#00F;
}
#show1{
color:#10e684;
font-size:18px;
font-weight:600;
}
#show2{
color:#9e2a28;
font-size:18px;
font-weight:600;
}
#show3{
color:#9e2a28;
font-size:10px;
}
fieldset{
width:400px;
padding-top:5px;
}
legend{
font-family: "Quando", serif;
}
.umame
{
text-align:right;
float:left;
padding-bottom:5px;
padding-right:8px;
}
.umame1
{
text-align:left;
float:left;
padding:0px;
margin:0px;
padding-bottom:5px;
}
</style>
</head>
<body class="wraper">
<div>
<img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;" />
<br />
<br />
<div class="container">
<center>
<br /><br /><br />
<h2 id="btext">Please perfectly enter the following fields :</h2>
<form name="login" action="" method="post">
<fieldset>
<table width="337" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="169" class="umame">
<span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169">
<span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169"> </td>
<td width="156" class="umame1">
<input type="submit" name="ok" value="Login" />
</td>
</tr>
</table>
</fieldset>
</form>
<table width="337">
<tr>
<td ><span id="inform"><br />
* Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link Get Password with your YMOFF Registration ID. </span>
</td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
If you want to center it, remove class="submit" and replace it with style="text-align: center;".
That will center the button in the row.
Also for IE, don't forget to specify a DOCTYPE declaration in your markup. Use this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">