I have a layout with an image on the left and a tab menu on the right. I would like the image and the text to always occupy each 50% of the width (except if the browser window is too small, in which case the image and tabbed menu stack on top of each other), meaning that both should automatically resize.
The image and tab menu are set as two columns:
.col-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 100%;
clear: both;
}
.col {
flex: 1;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
<div class="col-container">
<div class="col" style="background:white">
<img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="">
</div>
<div class="col" style="background:white">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
</div>
Full running code here: fiddle
Now, my problem is that I would like height of the content of any tab to be limited to that of the image. There should never be text that goes further down than the left image's height. It means that if there is too much text, it should become scrollable. As the viewer windows get rescaled, both the image and the "allowed text height" should adapt. As you can see on the fiddle example, the text in the "About" tab currently runs down way past the image height.
I have rewrote your code a little so it can work as desired. This code is fully responsive (resize the browser to see) and cross browser supported.
I have coloured the background red so you can see what is happening here.
I have also reduced #media all and (max-width:700px) to 500 just for this demo so it fits the stackoverflow window.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
.col-container,
.col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.col-container {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.col {
background: #b00;
position: relative;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
#menu {
position: relative;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
background: #fff;
z-index: 10;
}
.scroll {
overflow-y: auto;
position: absolute;
top: 0;
max-height: 100%;
z-index: 5;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
#media all and (max-width:500px) {
.col-container {
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
}
.InputItem,
.col {
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
flex: 1 1 auto;
text-align: center;
}
.scroll {
position: relative;
padding-top: 0;
}
}
<div class="col-container">
<div class="col">
<img id="menuImg" src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="" width=100%>
</div>
<div class="col">
<div id="menu" class="col">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
<div class="content col">
<div id="Home" class="tabcontent scroll">
<h3>Home</h3>
<div>
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime
hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae
sunt, non sunt tamen ab earum spe causae diligendi profectae. Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem
ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter
ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Accedebant
enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute
velut filo pendere statum orbis terrarum fictis vocibus exclamabant. Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt
et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. Ut enim benefici
liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. Et quia Mesopotamiae
tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta
vastarat. erat autem quod cogitabat huius modi. Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus. Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus
parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Oportunum
est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Quae dum ita struuntur, indicatum
est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi,
qui atrocium criminum ponderibus urgebantur. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas
Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? At
nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem,
ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam. Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros
excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
</div>
</div>
<div id="About" class="tabcontent scroll" style="display:none;">
<h3>About</h3>
<p>Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can use flex and then position properties on the divs to acheive this.
Add this CSS to your fiddle and you are done.
.col-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.col {
flex: 1;
border: 1px solid red; /*For demo purpose*/
}
.col:nth-child(2) {
position: relative;
overflow: auto;
}
#Home {
position: absolute;
}
#About {
/*This only for the first load. You are anyway changing the display property
on the tab clicks*/
display: none;
}
See the fiddle
You should give max-height to tabcontent class.
overflow: auto;
max-height: 386px;
you can get img elemet height than you can et tabcontent height
if you use jquery it s easer than dom js
var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;
Just add this and try I hope this will sort out your problem.
.scroll
{
height:100vh;
overflow:hidden;
}
If it does not work just comment :) remember just add this in last of your css. Do not delete anything.
Related
First of all, sorry for my bad English, hope you understand me.
Second, I started programing yesterday, wathed lots of tutorials and didn't found anything, probably I am just dumb.
Just begun a new html project, I started with a colored bar for the top of the website, then linked an image to the main html project, something like Home navigation bar image idk.
Now the problem is, I want to overlap the already linked to main html to colored bar (https://i.stack.imgur.com/iVqm3.png)
Bluebar CSS code:
.upperblue {
width: 100%;
background-color: rgb(71, 103, 245);
height: 100px;
position: relative;
}
Image HTML and CSS
<p id="homeimage">
<a href="/index.html">
<img `src="https://lh3.googleusercontent.com/EiXgCES3j3b98a6ADBoU37yzcAO1shECNmOzbCZn2HYcUBPW4xiFmCHsXCy-A`mWGTn5ySEU3U-Rpq2H_NrXjjuSg-Qrr3m74XSVF0y9VD6ayXRy2zYaTVqONCjlneaMfsb352Z0S=w2400" height="185"
width="426">
</a>
</p>
I made a example here, i import some fonts , a bunch of CSS selectors . Start studing , ctrl + shift + i on chrome was a good tool for you test it all !!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- IMPORTING GOOGLE MATERIAL FONT ICONS (https://fonts.google.com/icons) -->
<!--
How to use it :
Place the .material-symbols-outlined class in some element that have text (div,span,p,li,table,footer,header,etc..)
I think that it only dont work like inputs, textarea elements
Found some icon : [eg: https://fonts.google.com/icons?icon.query=menu]
Click and copy the example that show right in the page .
example :
<span class="material-symbols-outlined">menu</span>
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<!-- IMPORTING POPPINS FONT FROM GOOGLE FONTS (https://fonts.google.com/) -->
<!--
How to use it :
On the google page , well on the up-right side on the page have an button : 'View selected families'
(Its a icon actually, you will not see the text XD)
Click there and you will see how to use each font
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
h1 , h2 ,h3 , h4, h5 {
font-weight: 500;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
body {
margin: 0;
}
main {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* NOTE THAT HERE WE USE 2REM IN THE SIZE OF ASIDE ICONS , BECAUSE IS THEIR SIZE ON .header-icon ;D */
main > header {
flex: 0 0 50px;
display: grid;
grid-template-columns: 2rem auto 2rem;
justify-items: center;
align-items: center;
background: linear-gradient(45deg, #e7e7e7, #b9b9b9);
border-bottom: 1px solid #b5b5b5;
}
main > header > div:nth-child(1) {
margin: 0;
}
main > header > div:nth-child(2) {
margin: 0;
}
main > header > div:nth-child(3) {
margin: 0;
}
main > section {
flex: 1 0 auto;
padding: 10px;
background: #f1f1f1;
}
main > section > div:nth-child(1) {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 10px;
background: white;
}
main > section > div:nth-child(1) > p {
margin-top: 10px;
}
main > footer {
flex: 0 0 10vmin;
display: grid;
grid-template-columns: auto auto auto;
justify-items: center;
border-top: 1px solid #ffffff82;
background: #e7e7e7;
}
main > footer > div:nth-child(1) {
margin: 0;
}
main > footer > div:nth-child(2) {
margin: 0;
}
main > footer > div:nth-child(3) {
margin: 0;
}
/* SEE THAT , WE CAN TURN OUR ICON BIGGER SETTING A FONT-SIZE PROPERTY !! ALSO OTHER OPTIONS*/
.header-icon {
font-size: 2rem;
}
/* ALSO NOTE THE CSS SELECTORS IM USING ...*/
a.normal {
color: black;
text-shadow: 0px 0px 1px black;
transition: .1s linear 0s text-shadow;
}
a.normal:hover {
text-shadow: 0px 0px 2px black;
}
a.button {
display: block;
border-radius: 6px;
color: white;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px grey;
border: 1px solid gray;
background: #c1c1c1;
padding: 4px 14px;
transform: translate(0px, 0px);
transition: .1s linear 0s all;
}
a.button:hover {
transform: translate(1px, -1px);
box-shadow: 0px 0px 3px -1px #00000069;
}
button.sucess {
border-radius: 6px;
background: green;
color: white;
padding: 2px 10px;
border: 0;
}
</style>
</head>
<body>
<main>
<header>
<!-- Using google materials icons font with a custom class !! the default class need to be here !!-->
<div><span class="header-icon material-symbols-outlined">menu</span></div>
<div><h3>LOGO</h3></div>
<div><span class="header-icon material-symbols-outlined">toggle_on</span></div>
</header>
<section>
<div>
<h5>Main content</h5>
<p>
Lorem ipsum dolor sit amet. Est internos galisum ut adipisci voluptas qui ipsum quisquam aut dicta assumenda ut iste velit sit quia quasi id sequi fugiat. Et autem veniam eum alias optio et quas tenetur aut aperiam dolorem est soluta laboriosam non cupiditate officiis qui neque consequatur. Est ipsam numquam sit nobis iure quo assumenda quidem ut voluptatem accusamus rem consequatur nesciunt eum deserunt accusamus ad eaque explicabo. Hic quam facilis et dolorum galisum ut dolorum aliquid ad dolorem sapiente in aspernatur nemo sed veritatis maxime non dolorem quisquam.
A nemo voluptas a repellat iste ut harum dolor aut neque dolorum nam voluptatibus amet quo repellat autem et quasi nemo. Vel temporibus adipisci nam nesciunt quidem aut voluptas placeat in accusantium sunt ut laborum illum a esse quia aut doloribus molestiae. Ut sint nemo non odit autem ea optio repudiandae et sequi nostrum.
Aut culpa cumque qui repellendus earum aut dolores labore et velit ullam eum ratione culpa ut nemo repellat in dolorum eius. Et cupiditate maxime eos officiis animi eos architecto quam aut ipsa inventore. Ad quos sint ex cumque quis eum officiis harum qui culpa soluta eos optio omnis ut voluptatem accusamus aut ratione fugit. Et inventore vero ab eligendi debitis sit tempore dicta nam voluptatem nostrum.
</p>
Link
Link
<button class="sucess">Button</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="checkbox" name="" id="myCheckbox"><label for="myCheckbox"></label>
<input type="date" name="" id="">
<input type="file" name="" id="">
<input type="number" name="" id="">
<input type="password" name="" id="">
<input type="search" name="" id="">
<input type="radio" name="" id="">
</div>
</section>
<footer>
<div>FOOTER 1</div>
<div>FOOTER 2</div>
<div>FOOTER 3</div>
</footer>
</main>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
CSS SELECTORS // HTML TUTORIAL
I'm working on a react-app and I want the basic structure of (header, sidebar and content) using flex-box, so what I did is that I gave the body the height of 100%, overflow equal hidden and wrapped the three components in one component with the display of flex and direction to column, now the header is wrapped in a container and the sidebar and the content are wrapped in another, the header flex is 0 and the height is totally up to the padding needed, the sidebar and the content's parent's display is flex with the direction of row, same as the header the sidebar's flex is 0 and the content is 1 the basic view is alright but when the content's children overflow the height I'm not able to scroll even when adding the height of the parent to 100% and overflow-y to scroll or auto, what am I missing here ?
here is the page view
here is the component's structure
import React from 'react';
import Header from './components/header';
import Sidebar from './components/sidebar';
import Content from './components/content';
function App() {
return (<React.Fragment>
<div className="header-container">
<div className="header" style={{
backgroundColor: 'red',
color: 'white'
}}>
<h1>Header</h1>
</div>
</div>
<div className="content-container">
<div className="sidebar" style={{
backgroundColor: 'blue',
color: 'white'
}}>
<h1>Sidebar</h1>
</div>
<div className="content" style={{
backgroundColor: 'green',
color: 'white'
}}>
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</React.Fragment>);
}
export default App;
and here is the css
html, body {
margin: 0 !important;
padding: 0 !important;
}
body {
height: 100% !important;
overflow: hidden;
}
h1 {
margin: 0;
}
#root {
display: flex;
flex-direction: column;
}
p {
width: 30px;
}
.header-container {
display: flex;
flex: 0;
}
.content-container {
display: flex;
flex-direction: row;
flex: 1;
height: auto;
}
.header {
padding: 10px 0;
flex: 1;
width: 100%;
}
.sidebar {
flex: 0;
padding: 0 10px;
}
.content {
flex: 1;
flex-grow: 1;
}
I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.
This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here
Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...
I am trying to use ngAnimate to collapse in / out boxes. I did something like that and it works, but how do I get rid of the height property? Boxing can be used to extend (the text in it), but then the text will be coming out over the edge.
.myTest {
transition: all linear 0.5s;
height: 400px; /* I want to get rid this */
}
.ng-hide {
height: 0;
}
<div class="content myTest" ng-show="show">
<div class="row">
<div class="col-md-15">
<div class="text1">{{text1}}</div>
<div class="analytic">{{analytic}}</div>
<div class="text2">{{text2}}</div>
</div>
</div>
<div class="row">
<div class="col-md-15">
<div class="label">{{'label'|translate}}</div>
<div class="text3">{{text3}}</div>
</div>
</div>
</div>
Please Refer This Code
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
This has also been answered with many approaches in this question. There is no easy way to make this animation work perfectly every time without using javascript to measure the height of the inner contents or using a css scale (see the link).
Also, to ensure that the text is hidden when the container is collapsed, be sure to use overflow: hidden; in the class
A basic example using max-height rather than height to getter a tighter box around the data:
.myTest {
transition: all linear 0.5s;
max-height: 400px; /* Set to something larger is expected */
overflow: hidden;
}
.ng-hide {
max-height: 0;
}
I will use http://augus.github.io/ngAnimate/ It's the good package for animation without hard work. For using that you need just include css and add class for animated div.
Ie.
li.animation.slide-down ng-repeat='item in vm.items | filter: vm.filters'
Is this what you expected? I don't have the height in here and the animation works just fine.
var demoApp = angular.module('demo-app', ['ngAnimate']);
demoApp.controller('DemoCtrl', function($scope) {
$scope.text1 = 'Sometext1';
$scope.analytic = 'This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.';
$scope.text2 = 'Sometext2';
$scope.text3 = 'Sometext3';
$scope.show = true;
$scope.toggleDiv = function() {
$scope.show = !$scope.show;
};
});
.myTest {
border: 1px solid gray;
margin: 10px;
transition: all linear 0.5s;
}
.ng-hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<body ng-app="demo-app">
<div ng-controller="DemoCtrl">
<button ng-click="toggleDiv()">Toggle Div</button>
<div class="content myTest" ng-show="show">
<div class="row">
<div class="col-md-15">
<div class="text1">{{text1}}</div>
<div class="analytic">{{analytic}}</div>
<div class="text2">{{text2}}</div>
</div>
</div>
<div class="row">
<div class="col-md-15">
<div class="label">{{'label'}}</div>
<div class="text3">{{text3}}</div>
</div>
</div>
</div>
</div>
</body>
Base on what I understand about the OP, you are looking for something like this below. Try my code and this should works smooth.
HTML
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck">Lorem ipsum dolor sit amet, pro no tamquam alienum, eloquentiam interpretaris eum cu. Nec ex simul tantas, ea qui conceptam expetendis. Alii dolore labores in sit, eius fierent luptatum an quo. Sit ut aliquam minimum reprimique. Tempor concludaturque sed an.
Posse definiebas id quo, eu elitr principes consulatu vim, no natum habeo tation per. Vim ne sumo abhorreant, vel ad equidem expetendis, in nobis meliore cum. Dolor ubique vis ex, ubique populo detraxit ad est, adolescens mnesarchum et vis. Stet tation necessitatibus qui ad, ex intellegam delicatissimi eum. Vix cu altera disputationi, vel nonumes quaestio at. In vel illud consequat.
Fierent perfecto efficiantur pro id, splendide definitiones vim ne, ius ut solum alterum platonem. Percipit accommodare nam id. An est altera albucius incorrupte. Exerci volumus scriptorem qui an, ocurreret mnesarchum te sit, qui meis constituto te.</div>
</body>
CSS
div {
transition: all linear 0.5s;
background-color: #3598dc;
height: 100%;
width: 100%;
position: relative;
padding: 10px;
top: 0;
left: 0;
color: #ffffff;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
Try it and explore. Happy coding :)
I am looking for help in modifying the code I have cobbled together to expand a panel to show full details for an item.
The code works fine for a single element on the page. However, I want to change it so I can have multiple items listed. However, at present when I add additional panels they do not collapse and expand only the first instance works.
I assume I need to adjust the Javascript in some way so it can link to each unique instance.
I know there are existing packages available from jquery and bootstrap but for reasons I won't go into these are difficult for me to implement so I am hoping someone can help me modify this code to work.
window.onload=function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
tagList.style.display = 'none';
document.getElementById('clearance-item-header').addEventListener('click',function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
if (display == 'none') {
tagList.style.display = 'inline';
document.getElementById('toggleExpandBtn').textContent = '[-]';
} else {
//style.setProperty('height',lineheight*3+'px');
tagList.style.display = 'none';
document.getElementById('toggleExpandBtn').textContent = '[+]';
}
});
}
<style type='text/css'>
#tagList { overflow: hidden; }
.clearance-item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.clearance-item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.clearance-item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.clearance-item-title {width:450px; float:left;}
.clearance-item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.clearance-item-detail {width:300px; float:left;}
.clearance-item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-price {width:105px; float:left; padding-right: 60px;}
.clearance-item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
#toggleExpandBtn {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
#clearance-item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.clearance-item-content { padding-top:10px; }
.clearance-item-content h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-content p { margin-bottom:6px; text-align:justify; }
</style>
<div class="clearance-item">
<div id="clearance-item-header">
<div class="clearance-item-image">
<img src="images/clearance-item.jpg" width="100" height="100" />
</div>
<div class="clearance-item-title">
<h2>Product Full Title</h2>
</div>
<div class="clearance-item-detail">
<p>Condition: New/Used/Other</p>
<p>Location: Brighton</p>
</div>
<div class="clearance-item-price">
<p>£999.99</p>
</div>
<div id="toggleExpandBtn">[+]</div>
<div style="clear:both;"></div>
</div>
<div id='tagList'>
<div class="clearance-item-content">
<h3>Product Name</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
OK. Figured it out. Changed the styling id's to classes and got the javascript to dynamically assign unique id's to each instance as well as adding click event to the header div. Then used this.getAttribute("id") to get the id of the instance of the header that was clicked. Used that to set display to inline or none for the associated content.
window.onload=function(){
var headerclassname = document.getElementsByClassName("item-header");
for(var i=0;i<headerclassname.length;i++){
headerclassname[i].addEventListener('click', toggleContent, false);
headerclassname[i].id = 'item-header-' + i;
}
var contentclassname = document.getElementsByClassName("item-content");
for(var x=0;x<contentclassname.length;x++){
contentclassname[x].style.display = 'none';
contentclassname[x].id = 'item-content-' + x;
}
var toggleclassname = document.getElementsByClassName("item-toggle");
for(var y=0;y<contentclassname.length;y++){
toggleclassname[y].id = 'item-toggle-' + y;
}
}
var toggleContent = function() {
var headerid = this.getAttribute("id");
var contentid = headerid.replace("item-header-", "item-content-");
var toggleid = headerid.replace("item-header-", "item-toggle-");
var displayvalue = document.getElementById(contentid).style.display;
if (displayvalue == 'none') {
document.getElementById(contentid).style.display = 'inline';
document.getElementById(toggleid).textContent = '[-]';
} else {
document.getElementById(contentid).style.display = 'none';
document.getElementById(toggleid).textContent = '[+]';
}
}
<style type='text/css'>
.item-content { overflow: hidden; }
.item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.item-title {width:450px; float:left;}
.item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.item-detail {width:300px; float:left;}
.item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.item-price {width:105px; float:left; padding-right: 60px;}
.item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
.item-toggle {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
.item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.item-description { padding-top:10px; }
.item-description h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.item-description p { margin-bottom:6px; text-align:justify; }
</style>
<div class="item">
<div class="item-header">
<div class="item-image">
<img src="image.jpg" width="100" height="100" />
</div>
<div class="item-title">
<h2>Item Title Here</h2>
</div>
<div class="item-detail">
<p>Condition: New</p>
<p>Location: Brighton</p>
</div>
<div class="item-price">
<p>£100.00</p>
</div>
<div class="item-toggle">[+]</div>
<div style="clear:both;"></div>
</div>
<div class="item-content">
<div id="buylink">
<?PHP processWebCodes("Type: BuyLink
Layout: Combined
Product: 1200811
1200811-AllVariants: True");?>
</div>
<div class="item-description">
<h3>Sub Title Here</h3>
<p>Detailed Description Here</p>
<p> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You say
at present when I add additional panels they do not collapse and expand only the first instance works
Could you provide some code with an additional panel? Without seeing your code it is difficult to tell, although I would suggest you make sure that each of the panels and buttons has unique ids. Otherwise, you would get the result you are experiencing from js.