I have this form in a table and one of the text inputs has a suggestion box. when the page is zoomed out to 90% the suggestion box div moves about 6 pixels down and right. is there any way to keep the div in the same position when zooming? thanks. here is a jsfiddle to demonstate
html:
table {
border:1px solid grey;
}
#box {
border:1px solid red;
width:150px;
position:absolute;
top:35px;
left:41px;
background-color:white;
}
<table>
<tr>
<td>one</td>
<td><input></td>
</tr><tr>
<td>two</td>
<td><input type = "button" id = "showBox" value = "click then zoom out"></td>
</tr>
</table>
<div id = "box" style = "display:none;">
<ul>
<li>now zoom out</li>
</ul>
</div>
javascript:
$('#showBox').click(function(){
$('#box').show();
});
I've updated your fiddle
Moved the box in the corresponding <td>. There is still some flickering though, but it's better than before. Hope it fits your standards :)
Related
I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.
Code Snippet:
<tbody>
<tr>
<td rowSpan="3" id="date">
Date
</td>
<td colSpan="4">
<label className="accounting-label" htmlFor="accounting">
Accounting
</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
onClick={showNestedData}
></input>
</td>
</tr>
<tr className="accounting-data hide">
<td className="australia-data">
<div className="flex-au-wrapper">
<div className="au-checkbox-wrapper">
<input
type="checkbox"
id="au-checkbox"
name="subscribe"
value="newsletter"
></input>
</div>
<div>Australia</div>
</div>
</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
To extend table border you can give some padding,you can also you can select the one you want with :nth child
in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours
.accounting-data,
tr {
position : relative;
/* border-bottom: 1px solid #ccc; */
}
th, td{
border: 0;
}
tr::before {
content : "";
display: block;
position: absolute;
width: calc(100vh + 150px);
top: 0;
background: #555;
border-bottom: 1px solid #ccc;
left: 0;
}
May it helps :)
I am trying to build a spreadsheet-like application and using a table <td> with a tag contenteditable = "true" and I want the background color of the cell to be changed after it was changed.
From my research I figured I would need javascript or jquery to do so, however I know very little of it. Where do I start? So far I have figured how to change color when the cell is being edited. thank you!
<td contenteditable="true" >
<style>
[contenteditable="true"]:focus {
background-color: yellow;
}
</style>
"Stuff"
</td>
So I see you figured out how to change color when the cell is being edited. Now to change the cell after its done being edited you can use the following example.
jQuery has a function called focusout which triggers when the element loses focus from the user. It will then add the class orange which will change the background to orange.
$( document ).ready(function() {
$("td").focusout(function(){
$(this).addClass("orange");
});
});
td[contenteditable="true"]:focus {
background-color: yellow;
}
.orange{
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
Here is a fiddle to play with: https://jsfiddle.net/8zbrxwpz/
Use td[contenteditable="true"] selector, and add the table parent as well.
td[contenteditable="true"]:focus {
background-color: yellow;
}
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
https://jsfiddle.net/kasyzytr/
I'm building an HTML view consisting of a <table>, with each cell containing only a single <ul> element, with a variable number of <li>. For readability reasons, my rows have a min-width: 100px;, but expand based on the contents of the <ul>. But in the other cells (which a lower number of <li>). I want my <ul> to use 100% of the cell's height. At the moment, they keep the 100px height and are verticaly centered.
My view can be summed up to that :
<table>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
</table>
My reason for this, is that each <li> can be dragged & dropped between every <ul>, but the fact they are not resizing make dropping on an empty list kind of hazardous, because you don't "see" them, and have to guess where they are. It would be a lot easier if they were using the full cell dimensions.
I have made a lot of tries using developer tools, but could not find the right combination of CSS and Javascript.
Technicals prerequisites :
Javascript DOM manipulation is OK, I already do it to resize my table. I use ExtJS, but I'm OK with porting jQuery or pure JS code.
Compatibility with IE8 is a must (75% of final users are on IE. Gotta love the corporate world...)
Thanks for any advice !
EDIT : Here's a Fiddle that represents my code as closely as possible (NDA prevents me from sharing the original code)
For height: 100% to work as expected the container must have its height set. I have a solution below that uses JavaScript to set the height of all the ul's, it can be used as a function that runs every time it changes if needed:
function fixDimensions() {
var table = document.getElementById('table');
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++){
var tds = trs[i].getElementsByTagName('td');
for(var g = 0; g < tds.length; g++){
var ul = tds[g].getElementsByTagName('ul')[0];
ul.style.height = (tds[g].clientHeight - 12) + 'px';
}
}
}
The - 12 on the height is for the padding and border. JSFiddle.
You could use td themselves to draw the borders : http://jsfiddle.net/P5h8d/2/
table {
width: 100%;
background:black;
border-spacing:1px;
}
tr {
min-height: 50px;
width: 100%;
}
tbody th, tbody td {
border: 3px dotted red;
}
th, td {
width: 20%;
background:white;
}
You might not need a table if:
you use display:table instead <table> to turn <ul> visually into a cell.
DEMO
<section>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
</section>
CSS
section {
display:table;
border-spacing:5px;
}
section > div {
display:table-row;
}
section>div>ul {
display:table-cell;
background:red;
min-width:100px;
}
you use display:flex;
DEMO
basic CSS used :
tr {
display:flex;/* reset display:defaut*/
}
td {background:gray;
display:flex;/* here again display reset */
flex-direction:column;/* make sure we draw content from top to bottom */
margin:2px;
}
ul {
padding:0;
margin:5px;;
min-width:100px;
background:red;
flex:1;/* fills or shares whole height of its flex box*/
}
Not to pollute my first answer, added here the drag and drop js
No matter the height of the ul , li drops in !
here is a CSS way to extend area around an element to increase area where it can catch mouse events.
IE8 understands :before/:after , so we use them. and set them in absolute position on top and bottom of your ul.
DEMO
the CSS used:
td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
position:relative;
}
ul:before,
ul:after {
content:'';
position:absolute;
height:200px;/* whatever you need or think it is safe */
left:0;
width:100%;
}
ul:before {
bottom:100%;
}
ul:after {
top:100%;
}
added to the demo basic HTML5 drag and drop (attributes and js) since it was missing from your fiddle.
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
I have a table with one row, with one cell, that has a text. the text is in the center of the td.
while clicking the td, I want to add an image after the text. I don't want that the text will be moved, but will be stay in the same place.
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/L7qn3/1/
in this jsfiddle, the text moves left.
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>
thank you all!
The only way to do this is by giving the text a fixed margin instead of centring it. That way the text will stay centred when new content is added.
<td style="border:1px solid red; width:100px;" onclick="func(this);">
<span style="margin-left:38px;">sfh</span>
</td>
Here's the example JSFiddle
You need to place script tag before the table, otherwise browser can't find the function since function is declared afterwards..
Here is working example FIDDLE
<script>
function func(elem) {
elem.innerHTML += "<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAQABADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAQMEBf/EACQQAAEDBAEDBQAAAAAAAAAAAAECAwQFERIhABQiQRNCUWGR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAfEQEAAgEEAwEAAAAAAAAAAAABAxECACExQRITMlH/2gAMAwEAAhEDEQA/AN5ymSaWUmTSXZkhBbV0rSgSpJJuTYK0Mdj75fVYMZ9TcRlKDLDTq0qjxgEOY37dW3dCvBvccEOXGrMNmFPkNR32UlZmvLClObPZux93z44qfVKUoejFjP8ARpxcS0X8SlwZbF8tEKH5xskGUkmOZnSdUVXfe69fmoGM5HF6iOxfpcvJbsONjHhTZs5Nf//Z'>"
}
</script>
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>
I have 2 div floating side by side.
The div on the left is a part number, only one line. The div on the right is a product description and can have multiple lines.
How can I vertically align the left div text when the right div grows to 2 or more line.
Here is the code.
<td>
<div class="prodNumber left partNumSizexSmall">
<b>PartNum</b>
</div>
<div class="prodDesc xsmallDesc left">
ProductDescription1
</div>
</td>
Here is the CSS
.left {
float: left;
}
.prodNumber {
}
.prodDesc {
padding-left: 8px;
padding-right: 8px;
}
.partNumSizexSmall {
min-width: 50px;
}
.xsmallDesc {
max-width: 550px;
}
Use table instead of div
<td>
<table>
<tr>
<td class="prodNumber left partNumSizexSmall">
<b>PartNum</b>
</td>
<td class="prodDesc xsmallDesc left">
ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1
ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1
Product Description1 Product Description1 Product Description1 Product Description1
</td>
</tr>
</table>
</td>
The div to have it's content centered needs the display: table-cell
.center_me {
height: 200px;
vertical-align: middle;
display:table-cell;
}
The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.
Here's a working JSFiddle demo.
Use line-height.
$("document").ready(function(){
var newheight = $(".prodDesc").height();
var newheight2 = $(".prodNumber").height();
if( newheight > newheight2 ){
$(".prodNumber").css("line-height", newheight);
}else if( newheight2 > newheight ){
$(".prodDesc").css("line-height", newheight2);
}
});
Should work, but I didnt test it. sorry.
the most proven solution is to apply main container as display:table; and the children as display:table-cell. Since as per ur requirement you want the both prodNumber & prodDesc to be dependent on each other hence please add one outside wrap which holds both these elements. See working file here: urlhttp://jsfiddle.net/wZ3n3/
PS: append more texts.
Hope you got answer.
Use somthing like this
<div align="center">
This is some text!
</div>