I tried to set the width(178px) and height(178px) of my table to the width and height of the text area on click of a button.Width(178px) setting works fine, but height is set only for 17px(I guess some kind of slicing of 8 from 178px is happening--need help in this part).I tried element.style.height, element.offsetHeight, element.clientHeight, element.getBoundingClientRect().height
Everything results the same.I referred many posts in SO regarding this...many developers are getting problem in setting the height but width wrks fine fr them.What could be the reason?Thanks.
<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
function chan() {
var w=document.getElementById('num').getBoundingClientRect().width;
var h=document.getElementById('num').getBoundingClientRect().height;
document.getElementById("demo").innerHTML=w+" "+h;
document.getElementById('cache').style.width=w+"px";
document.getElementById('cache').style.height=h+"px";
}
</script>
change table style display: inline; to display: table; to get its height perfectly.
table {
display: table;
width: 178px;
height: 178px;
}
display: inline : Displays an element as an inline element
display:table : Let the element behave like a table element
ul {
list-style-type: none;
}
li {
display: inline;
/*not working for list2_tab_ta*/
}
input {
border: 1px solid black;
width: 30px;
height: 30px;
padding: 5px;
background-color: grey;
}
#clr {
margin-left: 190px;
margin-bottom: 13px;
padding: 5px;
}
table {
display: table;
width: 178px;
height: 178px;
}
td {
border: 1px solid black;
background-color: powderblue;
width: 30px;
height: 30px;
padding: 5px;
}
textarea {
display: inline;
/*readonly: true;*/
}
<ul>
<li>
<input type="number" id="operator1">
</li>
<li>
<input type="text" id="operand1">
</li>
<li>
<input type="number" id="operator2">
</li>
<li>=</li>
<li>
<input type="number" id="result">
</li>
</ul>
<button id="clr">Clear</button>
<ul>
<li>
<table id="num">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>/</td>
</tr>
</table>
</li>
<li>
<textarea id="cache"></textarea>
</li>
</ul>
<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
function chan() {
var w=document.getElementById('num').getBoundingClientRect().width;
var h=document.getElementById('num').getBoundingClientRect().height;
document.getElementById("demo").innerHTML=w+" "+h;
document.getElementById('cache').style.width=w+"px";
document.getElementById('cache').style.height=h+"px";
}
</script>
Hope this helps!
Related
I wish to keep the height of the two children div's, abc and def constant, and each with height half that of their parent, xyz. I was able to do this using flex in CSS, but in each of the child div abc and def, I have tables in which rows are added dynamically. This causes the divs abc and def to expand to accommodate the rows.
I would like each of these to become scrollable when too many rows are added.
I have tried many solutions, but none of them seem to work.
Here is my code:
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
#abc {
width: 100%;
flex: 1;
}
#def {
width: 100%;
flex: 1;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<h2>ABC details</h2>
<table id="abc-table"></table>
</div>
<div id="def" class="container-fluid">
<h2>DEF details</h2>
<table id="def-table"></table>
</div>
</div>
Thanks in advance.
If you are using a flexbox to get the overflow, you should wrap the flexbox child's contents into an absolutely positioned contanier so that it can scroll on overflow.
So here is the summary of what I've changed in your code:
To demonstrate the overflow, set a specific height for xyz container. You can change this height as per your requirement.
Added position: relative and overflow-y: auto to the flexbox children- abc and def.
Wrapped the contents of abc and def into an absolutely positioned box:
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Added some borders and the tables in the boxes for illustration.
* {
box-sizing: border-box;
}
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
height: 250px;
border: 1px solid;
}
#abc {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
#def {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid red;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<div class="flex-inner">
<h2>ABC details</h2>
<table id="abc-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
<div id="def" class="container-fluid">
<div class="flex-inner">
<h2>DEF details</h2>
<table id="def-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
</div>
Give the child divs 'overflow:scroll', and 'height:[something]'.
I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here.
My HTML code is
Unordered List
This is a simple list
First Item (bold)
Second Item
Third Item
Last Item (underlined)
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<table>
<thead>
<div id="col3">
<table summary="" border="1" cellspacing="0" cellpadding="3">
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
My CSS code is
.box1 {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display:inline-block;
}
.box2 {
margin: auto;
background-color:white;
width: 300px;
padding: 25px;
height: 240px;
border-radius: 25px;
display: inline-block;
}
.box3 {
position: absolute;
right: 0px;
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display: inline-block;
}
Use float:left to align your boxes:
jsFiddle
EDIT:
I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (e.g. main) and give it this :after content:
main:after{
content:"";
display:block;
clear:both;
}
updated fiddle
try with this below code it may help you and look it into full screen
$(document).ready(function(){
$("a.toggleColor").click(function(){
$(".box2").toggleClass("border");
});
});
div.box1,.box2,.box3{
float : left;
height: 240px ;
width: 300px;
padding: 25px;
background-color: #4b4244;
margin : 25px;
border-radius: 25px;
}
.box2 {
background-color:white !important;
border : 1px #4b4244 solid;
}
.border{
border : 1px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
<h2>Unordered List</h2>
<p>This is a simple list</p>
<ul>
<li>First Item (bold)</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item (underlined)</li>
</ul>
</div>
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<div id="col3" >
<table summary="" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
Can I prevent the user from highlighting one column in a table?
I have a 2-column table. Users will want to copy the content in the second column, but not the first column.
<table>
<tr>
<td>col1</td>
<td>line1</td>
</tr>
<tr>
<td>col1</td>
<td>line2</td>
</tr>
<tr>
<td>col1</td>
<td>line3</td>
</tr>
</table>
Here's a JSFiddle with an example:
http://jsfiddle.net/vepq0e29/
When the user copies and pastes, I want the output to just be:
line1
line2
line3
...
line7
I don't want col1 to show up or be highlighted when the user selects the table.
How can I make it so that users can only select and copy content from the second column?
Thanks!
You can use pseudo-elements to show the text. Text from pseudo-elements is never copied at the moment (not sure, if it'll be changed sometime).
http://jsfiddle.net/vepq0e29/3/
td:first-child:after {
content: attr(aria-label);
}
<table>
<tr>
<td aria-label="col1"></td>
<td>line1</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line2</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line3</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line4</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line5</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line6</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line7</td>
</tr>
</table>
tr td:first-child {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
The user can't select the first column as long as he is not viewing the html source code.
http://jsfiddle.net/vepq0e29/1/
Please checkout this example, try yourself use Run Cde Snippet below and just select all rows in single column and then copy and paste in any editor and see results :)
Hope this will help
div.table {
display: block;
width: 100%;
}
div.td-outer {
width: 48%;
display: inline-block;
border: 1px solid #00aaff;
text-align: center;
vertical-align: middle;
height: 100%;
}
div.tr {
display: block;
text-align: center;
height: 140px;
vertical-align: middle;
}
div.td-inner {
display: inline-block;
border: 1px solid #ccc;
width: 90%;
vertical-align: middle;
height: 95%;
margin: 3px;
}
div.td-inner span {
height: 95%;
vertical-align: middle;
}
<div class="table">
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
</div>
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
line1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
line2
</span>
</div>
</div>
</div>
</div>
I've made 4 buttons that each link to a different table.
I'm having trouble individually coloring each button using css... For example, I'd like the first button to be red and the second to be blue, ect.
I really appreciate the help. Thanks.
link to demo: http://jsfiddle.net/LpLhP/8/
html:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<table id="2">
<thead>
<tr>
<td>Sport</td>
<td>Gender</td>
<td>Hair Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Baseball</td>
<td>Female</td>
<td>Blonde</td>
</tr>
<tr>
<td>Curling</td>
<td>Female</td>
<td>Brown</td>
</tr>
<tr>
<td>Hockey</td>
<td>Male</td>
<td>Black</td>
</tr>
</tbody>
</table>
<table id="3">
<thead>
<tr>
<td>Favorite TV Show</td>
<td>Favorite Band</td>
<td>Favorite Food</td>
</tr>
</thead>
<tbody>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
</tr>
<tr>
<td>Lost</td>
<td>Fall Out Boy</td>
<td>Steak</td>
</tr>
<tr>
<td>The Office</td>
<td>OneRepublic</td>
<td>Waffles</td>
</tr>
</tbody>
</table>
<table id="4">
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
<td>1</td>
css:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a{
margin: 0.5rem;
}
a.button{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
table{
width: 80%;
margin: 2em auto;
border: 2px solid black;
}
tr:nth-child(even){
background-color: #F7F7F7;
}
thead{
background-color: darkgrey;
}
th{
padding: 0.75em 0;
}
td{
padding: 0.7em 1em;
}
java:
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
use nth:child() selector in your css as
a.button:nth-child(2){
background-color: #4679BD;
}
http://jsfiddle.net/LpLhP/17/
Give each 'button class' a fellow class such as the following:
<a class="button red" data-table="1" href="#">Slifer Level</a>
<a class="button blue" data-table="2" href="#">Ra Level</a>
<a class="button green" data-table="3" href="#">Obelisk Level</a>
<a class="button yellow" data-table="4" href="#">Exodia Level</a>
Then, give the CSS for each new class you defined
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
there are several ways to do this, the easiest is to make an extra class
<button class="button red"></button>
.red{
background-color:red;
}
button:nth-of-type(1) <--- First Button Styling
Try This
a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}
DEMO
why not add css
a.button:nth-child(1){
background-color:red;
}
a.button:nth-child(2){
background-color:blue;
}
<a class="buttona" data-table="1" href="#">button1</a>
<a class="buttonb" data-table="2" href="#">button2</a>
<a class="buttonc" data-table="3" href="#">button3</a>
<a class="buttond" data-table="4" href="#">button4</a>
.buttona{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
.buttonb{
background-color: blue;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: red;
}
}
Use Different CSS for each button like this.
Change the background-color and the hover background-color.
<style>
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
.button{
color: #fff;
padding: .5rem;
border-radius: 5px;
text-decoration: none;
}
</style>
<a class="button" id="red" data-table="2" href="#">button2</a>
<a class="button" id="blue" data-table="2" href="#">button2</a>
<a class="button" id="grren" data-table="2" href="#">button2</a>
Try this.
Hope this helps.
give individual ids to buttons.
<a class="button" id="button1" data-table="1" href="#">button1</a>
<a class="button" id="button2" data-table="2" href="#">button2</a>
<a class="button" id="button3" data-table="3" href="#">button3</a>
<a class="button" id="button4" data-table="4" href="#">button4</a>
Working Demo
Data table is a pretty good way to target too, but this is probably more versatile site wide. nth of type is great for lists and stuff, but I doubt you'll get much reuse out of it in this situation. You also don't really need adjacent selectors like a.red-button etc.
I'd go with a site wide button style and then block element modifier style.
Here is a fiddle too:
HTML
Button
<button class="button">Button</button>
<input type="submit" class="button" value="button" />
CSS
.button { /* button reset - base */
display: inline-block; /* makes sure you can use margin-top etc */
border: 0; outline: 0; /* overrides defaults */
margin: 0; padding: 0;
border-radius: 0; /* overrides defaults */
background: gray; /* overrides background image */
font-family: inherit; /* gets parent font */
color: inherit; /* gets parent color */
text-align: center;
text-decoration: none;
-webkit-appearence: none; /* removes ios styling defaults */
-moz-appearence: none;
appearence: none;
cursor: pointer;
font-size: 1.2em;
padding: .5em .7em
}
/* specific styles */
.light {
background: red;
}
.dark {
background: purple;
}
.selector {
background: color;
}
.big-button {
font-size: 1.6em; /* etc. */
}
now, use those styles with the data table if you want - I see you are using sass - so you can exted these "mini-themes" to buttons, or divs or whatever and reuse common color combinations
.button[data-table="1"] {
#extend .light;
}
or
a[data-table="1"] {
#extend .dark;
#extend .big-button;
}
/* or make them #mixins and #include them if that suits you better */
I have this CSS table code:
.navgroups table#rightTable {
float: right;
width: 33%;
}
.navgroups table#leftTable {
float: left;
width: 33%;
}
.nvagroups td#centerTable {
margin: auto;
}
In the middle table I want to insert an image, but the problem is bigger then just 33% (image size).
Every single letter in the middle table lowers the left table from the bar.
I tried the display:inline and display:inline-block.
I will just put this as an answer and I don't think anyone can get much better then this with the information you provided.
HTML:
<table class="rightTable">
<tr>
<td></td>
</tr>
</table>
<table class="leftTable">
<tr>
<td></td>
</tr>
</table>
<table class="centerTable">
<tr>
<td>
<img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
</td>
</tr>
</table>
CSS:
.rightTable {
float: right;
width: 33%;
}
.leftTable {
float: left;
width: 33%;
}
.centerTable {
margin: auto;
width: 33%;
}
table {
outline: 1px solid;
}
img {
width: 100%;
}
This is 3 tables all 33.33% with an image that fits in the center one.
DEMO HERE
And in this demo below we have text in the other tables. Works fine.
DEMO HERE
Update:
Demo of using 1 table instead of 3.
DEMO HERE
Here is my idea. Something like this:
<style>
table {
width: 100%;
border: 1px #cccccc solid; /* for cells preview */
}
td.left, td.right {
width: 33.33%;
background-color: #f0f0f0; /* for cells preview */
}
td {
border: 1px #cccccc solid; /* for cells preview */
height: 400px;
padding: 0;
}
td.middle {
text-align: center;
}
td.middle img {
max-width: 100%;
max-height: 100%;
}
</style>
<table>
<tr>
<td class="left">
Left cell content
</td>
<td class="middle">
<img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
</td>
<td class="right">
Right cell content
</td>
</tr>
</table>