When I use Javascript to place some table tags on a webpage, the displayed text is ignoring the table tags. It just places the text next to each other, instead of displaying it in columns.
This picture shows what is displayed:
In blue are the column headers, in black the table content. As you can see the table content does not follow the column headers...
This is the relevant piece of Javascript code:
document.getElementById("searchresults").innerHTML =
'<div class="table-row">
<div class="table-cell">114</div>
<div class="table-cell">GebouwEigenaar</div>
<div class="table-cell">Paleis het Loo</div>
<div class="table-cell">Begane Grond</div>
<div class="table-cell">Koffiecorner 1</div>
<div class="table-cell">Kantoorruimte</div>
</div>';
This is the relevant HTML code:
<div id="searchresults"></div>
The CSS used to display table rows and cells is used without issues elsewhere in the webapplication. It is also used to display the column headers in this way:
<div class="table-row-header">
<div class="table-cell col-2" >Sticker-ID</div>
<div class="table-cell col-2" >Gebouweigenaar</div>
<div class="table-cell col-2" >Gebouw</div>
<div class="table-cell col-2" >Verdieping</div>
<div class="table-cell col-2" >Ruimte</div>
<div class="table-cell col-2" >Ruimtefunctie</div
</div>
CSS code:
.table { display: table; width: 100%; border-collapse: collapse;}
.table-row { display: table-row; width: 100%; cursor: pointer; position: relative; margin-top: 20px;}
.table-row:nth-child(even) { background: #fafafa; }
.table-row:nth-child(odd) { background: white; }
.table-row-header { display: table-row; width: 100%; color: #0867b3; border-bottom: 1px solid #d7d7d7; background: white; }
.table-cell {display: table-cell; padding: 10px 10px; position: relative; }
.table-cell span { display: none; font-weight: bold; }
.col-2 { width: 16.66%; }
It appears that the browser does not render the HTML inserted by JavaScript.
But why that happens...?
I have tried replacing .innerHTML with .value, but that did not display anything.
Any suggestions are highly appreciated.
Thank you!
There is something that is preventing your table row and table cells from picking up their .css attributes. It's hard to guess why without knowing your .css files and surrounding context. But as a surface level guess, consider looking at
1) Your table cell/row css properties aren't being imported correctly.
2) Whether your parent table's css properties are overriding their children's properties.
As a clue, you should try pasting those divs outside the context of your table. Does the css styling automatically show up? If so, you now know that it's something to do with the parent divs. If not, you know the problem is with the child divs.
The issue has been resolved.
It was caused by an incorrect use of table-formatting tags.
That caused the formatting to be incorrect.
Thanks everyone for the provided suggestions!
Related
<div id="my-spoiler">
<div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
Spoiler Title
</div>
<div class="my-spoiler-content" id="1" style= "display:none">
Hidden Content
</div>
</div>
In order to use this multiple times in a post, I need to create unique "id" every time like id=1, id=2....
Is there any way to call child div without any "id" and achieve the results.
Note: initially the "content" ,is hidden and when user clicks the title then the content is visible.
I don't want to use any plugins for this.
var faqToggles = document.querySelectorAll('[rel="faq-toggle"]');
faqToggles.forEach( function(toggle) {
toggle.addEventListener('click', function(event) {
event.target.closest('.faq').classList.toggle('open');
});
});
.faq {
margin-top: 20px;
}
.faq .content {
border: 1px solid blue;
}
.faq:not(.open) .content {
padding: 0;
height: 0;
overflow: hidden;
border: 1px solid red;
}
[rel='faq-toggle'] {
/* this could be a button... maybe should be... */
cursor: pointer;
}
<section class="faq">
<header rel="faq-toggle">
This is the header / teaser etc.
</header>
<main class="content">
This is the full content.
</main>
</section>
OF course - StackOverflow - reorders the code (Backwards) - but something like this?
https://jsfiddle.net/sheriffderek/t32cqmwx/
There's actually no need to use javascript, this can be done purely with CSS.
The "title" is a label for a checkbox (that is hidden). Clicking on the label toggles the checkbox "checked" property.
The input is placed immediately before the content you want to hide / show.
The "hidden" content is hidden with css.
The adjacent sibling combinator, combined with the :checked pseudo-selector, allows us to style the "hidden" content specifically when the input is checked: input:checked + .spoiler-content
.spoiler {
border: 1px solid #ccc;
}
.spoiler+.spoiler {
margin-top: 20px;
}
.spoiler input[type="checkbox"] {
display: none !important;
}
.spoiler-content {
height: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all .5s;
}
input:checked+.spoiler-content {
max-height: 1000px;
opacity: 1;
}
<div class="spoiler">
<label class="spoiler-title" for="spoiler-1">
Spoiler Title
</label>
<input type="checkbox" id="spoiler-1">
<div class="spoiler-content">
Hidden Content
</div>
</div>
<div class="spoiler">
<label class="spoiler-title" for="spoiler-2">
Spoiler Title #2
</label>
<input type="checkbox" id="spoiler-2">
<div class="spoiler-content">
Hidden Content #2
</div>
</div>
NOTE: the "id" of the input and label must match, but this would be trivial to create new "ids" with php and simply injecting them into your markup easily:
<?php $spoiler_id = 'spoiler-' . rand(100000,99999999); ?>
Since you haven't shared any of your WordPress / PHP code with us, we don't know how you are adding this to your posts, so I can't advise more specifically how to get the ID injected.
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 5 years ago.
I need to animate the shrink and expand transitions for subsets of elements in a nested set of divs. The expand works fine, but the shrink is broken.
I have a structured collection of items (say, squares for purposes here) that I want to display selectively and whose transitions I want to animate.
The structure is: collection > groups > rows > squares
In static layout,
squares appear in horizontal rows;
rows are gathered vertically in groups;
a column of groups forms the collection.
Squares can be of varying sizes, so containers must adjust accordingly
(no fixed heights or widths).
I have obtained a static layout that is just what I want.
The problem comes with animation. I want to hide various subsets
of squares, rows and/or groups. Nearby items can look similar so it is
difficult for users to tell just what is being added or subtracted, so
I need a smooth animation so users can follow what is changing.
I am trying to do this with a CSS-animated shrink:
A shrinkMe class marks all element that I will want to
shrink/expand at the moment
CSS transition times are set for these
shrinkMe elements
A shrunken class is defined whose CSS has all its
size parameters set to 0
To shrink or expand, jQuery adds or removes
the the shrunken class tag to the $('shrinkMe') items, to animate
items between the full and shrunken (=0) sizes
The un-shrink animated transition is exactly what I want. But the shrink animation does not work at all - contents spill out of containers along the way.
shrink = function(bool,nsec) {
$('.shrinkMe').css("transition", 'all ' + nsec+ 's');
if (bool) $('.shrinkMe').addClass('shrunk')
else $('.shrinkMe').removeClass('shrunk');
}
anim = function(secs) {
return 'all ' + secs + 's'
}
.controls {
display: inline-block;
vertical-align: top;
}
.collection {
display: inline;
text-align: center;
border: 2px solid black;
padding: 3px;
display: inline-block;
}
.group {
display: block;
margin: 2px;
border: 2px solid black;
padding: 3px;
}
.row {
display: block;
vertical-align: middle;
background: #0cc;
margin: 1px;
border: 2px solid black;
}
.sq {
display: inline-block;
background: white;
width: 20px;
height: 20px;
margin: 5px;
border: 2px solid black;
}
.lg {
width: 25px;
height: 25px;
}
.shrinkMe {
border-color: red;
}
.shrunk {
height: 0px;
width: 0px;
border-width: 0px;
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class='controls'>
<button type='button' onclick='shrink(true,2)'>shrink reds </button>
<br>
<button type='button' onclick='shrink(false,2)'>unshrink reds </button>
</div>
<div class='collection'>
<div class='group'>
<div class='row '>
<div class='sq'></div>
<div class='sq'></div>
</div>
<div class='row shrinkMe'>
<div class='sq lg shrinkMe'></div>
<div class='sq shrinkMe'></div>
<div class='sq lg shrinkMe'></div>
</div>
</div>
<div class='group shrinkMe' id='group2'>
<div class='row shrinkMe' id='group2container2'>
<div class='sq shrinkMe'></div>
<div class='sq shrinkMe'></div>
</div>
<div class='row shrinkMe'>
<div class='sq shrinkMe'></div>
<div class='sq lg shrinkMe'></div>
<div class='sq shrinkMe'></div>
</div>
</div>
</div>
Among other things, I've tried using different explicit transition speeds, so containers shrink more slowly than their contents, but to no avail. If I set explicit heights and widths of the rows and groups, I can get a coordinated nested-shrink but it is ugly:
It shrinks by squashing to the left side and;
The final layouts can have empty spaces in them (e.g., when a row shrinks inside an unshrunk group, the fixed explicit group container height means there is now a hole where the row was).
What I want is to achieve is simple: a shrink animation that is the time-reverse of the nice clean un-shrink.
Here also is a jsfiddle showing the problem that additionally has buttons for trying separate timings of more deeply nested divs (which
does not help...)
https://jsfiddle.net/furnas/dgq8yusy/
Any explanation of what is going wrong and suggestions on how to fix
it?
Use jquery anymation onComplete event for adding and removing classes to divs.
because your css transition works like asyncronous method on another thread, so, you need to wait for it to complete and than add/remove classes.
http://api.jquery.com/animate/
I'm building a form manager for my framework and want to add methods to create form elements based on parameters passed. Each "element container" has the following:
A validation row positioned at the top of the container. This row is turned off by default (display: none) and will only show if a javascript validation error occured.
A label container (situated on the left)
A form control container (situated on the right)
Here is a sample HTML:
<div class='control_container'>
<div class='validation'></div>
<div class='label_container'>
<label for=''>Label</label>
</div>
<div class='elements_container'>
<div class='element'>
<input type='text' name='' value='' />
</div>
</div>
</div>
My issue here is that I need to the control_container to seperate label and elements containers but also need the label_container and element_container to both have the same height irrespective of the content. These 2 containers may have different background colours so I need to ensure that the stretch to the bottom of the control_container and also keep in consideration that the validation div might show (so using position: absolute and top: 0 might not work).
I have tried the following:
Giving control_container a relative position and the 2 seperate containers both a position absolute. As the height of the containers would mostly be dictated by the height of the label (if the label is multiple lines or if the element_container has multiple elements within it this option does not work.
Floats (There I say more? :D)
I would prefer a CSS solution which is compatible with most browsers (including IE8 (am I pushing it to ask for IE7 haha)
Any ideas?
** ADDITIONAL INFORMATION **
I want the layout to look something like this:
--------------------- control_container ---------------------
[Potential validation message (this will be toggled on/off) ]
[label_container][ elements_container ]
------------------- end of control_container ----------------
So label_container (with the label) and elements_container (with it's elements) will be next to eachother. These 2 containers may have different background colours so they should both stretch (height) according to the biggest element. The only issue I see here is validation element which wont show by default so using absolute positioning might not work as the validation message might take the top area and have the elements overlap eachother.
HTML:
<div class="controls">
<div class="message">Test</div>
<div class="label_container">
<label for="">Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label </label>
</div>
<div class="elements_container">
<div class="element">
<input type="text" name="test" value="" />
</div>
</div>
</div>
CSS:
.controls {
position: relative;
display: table;
width: 100%;
}
.controls .message {
background: red;
padding: 5px;
color: #FFF;
font-weight: bold;
height: 30px;
width: 100%;
display: table-caption;
box-sizing: border-box;
}
.controls .label_container {
display: table-cell;
background: #D3D3D3;
width: 150px;
height: 100%;
margin-top: 30px;
}
.controls .elements_container {
display: table-cell;
background: #A2A7DD;
color: #000;
width: 650px;
height: 100%;
margin-top: 30px;
margin-left: 150px;
}
All of them here in jsFiddle: Demo
How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?
I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.
This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:
<div class="section1"> content </div>
<div class="section2"> more content </div>
CSS:
.section1 {
float: left;
width: 200px;
border-right: 1px solid #333;
}
.section2 {
float: left;
width: 200px;
}
Edit: see also this answer
You could use css transforms. However, this just turns it, things are still where they would be if you hadn't rotated it.
HTML
<hr/>
<hr class="vert" />
<hr id="vert1" />
CSS
/*All <hr>*/
hr {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
/* IE 9 */
-webkit-transform:rotate(90deg);
/* Safari and Chrome */
}
/*<hr> of class ".vert"*/
hr.vert {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
/*<hr> with id "vert1"*/
hr#vert1 {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
Well you could possibly make a div (<div></div>) and then give it values with css later regarding height/width. If you want it to apply to one specific object give it an id <div id=""> and more than one object give it a class <div class="">
An example of the css you'd do is:
#(id name) or div.(class name) {
height: ; (how tall)
width: ; (how wide you want it)
background-color: ; (sets the color of the bar)
position: ; (depends on if you want it absolute or static etc.) }
You can obviously add/remove other css as you go depending on what you want to do
Put it in a div:
<div style="border-right:1px solid #333;">
Content here
</div>
This is with inline css. Otherwise, separate the css:
div {
border-right:1px solid #333;
}
I suppose you could re-style <hr /> as an inline-block element, with specified height...
hr {
display: inline-block;
width: 2px;
height: 256px;
}
That's just a basic example to get the <hr /> to look like I think you want it to look. You'd have to play with height and width (and possibly positioning) to make it do exactly what you need...
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.