baggysack
owner of the bag
I want to take a crack at a custom "hider" i.e. a button that, when clicked, shows hidden content, like a tab, and when clicked again, re-hides that content. Any tips on getting that to work?
I also would like to know how to make a hidden scroll. I believe, based on what I've read, that normally text cropped by "overflow: hidden" isn't readable; you have to manually add a "hidden scroll," like hide the scroll bar with margins or whatever. When looking at other codes, though, I don't think I see anything else BUT "overflow: hidden" and the code works as intended. This hasn't worked for me.
Here's the iCheck I'm chipping at. I want the body text to have the possibility of scrolling if a few words spill over. The writing sample placeholder box is where I want the custom hider to go.
I also would like to know how to make a hidden scroll. I believe, based on what I've read, that normally text cropped by "overflow: hidden" isn't readable; you have to manually add a "hidden scroll," like hide the scroll bar with margins or whatever. When looking at other codes, though, I don't think I see anything else BUT "overflow: hidden" and the code works as intended. This hasn't worked for me.
Here's the iCheck I'm chipping at. I want the body text to have the possibility of scrolling if a few words spill over. The writing sample placeholder box is where I want the custom hider to go.
Code:
[nobr]
[class=element]left:210px; z-index:1; width: 0; height: 0; border-style: solid; border-width: 0 0 460px 250px; border-color: transparent transparent #09a1a2 transparent;[/class]
[class=body]line-height:.85em; text-align:justify; padding:25px; padding-top:0px; letter-spacing:.75px; text-shadow:.5px 0px 0px white; width:65%;[/class]
[class=button]color:white; background: #38c0bc; height:55px;width:55px; border-radius:100px; box-shadow:2px 2px 0px #09a1a2; font-size:28px;text-align:center;line-height:50px;text-shadow:1px 1px 0px #09a1a2;[/class]
[class=header]position:relative; z-index:0; width:480px; text-align:right; padding:5px; background:#09a1a2; color:white; padding-right:15px;[/class]
[class=sample]background:#09a1a2; color:white; border-radius:15px; padding: 10px; font-size:10px; line-height:.85em; letter-spacing:.75px[/class]
[div=padding-top:0px; padding-bottom:7px; color:#161817; background:#bef7ed; margin:auto; width:460px]
[div class="header"][SIZE=7][font=Crete Round]This is a header.[/font][/SIZE][/div]
[div=display:flex; flex-flow:row;]
[div=position:relative; z-index:1; align-items:center; padding-left:20px; padding-right:20px; width:35%; height:385px;][div=margin-top:-30px][img]https://framapic.org/MkqOdwqfTvYR/G5KChmHsfKGF.png[/img][/div]
[div class="button", style="z-index:4; position:relative; margin-left:46px; margin-top:10px;"][fa]fa-user[/fa][/div]
[div=z-index:3; position:relative; width:100%; bottom:16px; padding:12px; padding-top:25px; font-size:12px; line-height:1em; border:1px solid black; overflow:hidden; height:75px;]
[font=Pridi]Nicknames: Baggy, Sack(y) [br][/br]
Age: 19 [br][/br]
Personality: ISTP-T [br][/br]
Average Word Count: 450-700 [br][/br]
Listening To: "My Generation: 80's" (playlist) [br][/br]
Cravings: Slice-of-life w/ a touch of whimsy[/font][/div][/div] [br][/br]
[div class="body", style="height:338px; overflow:hidden;"]
[br][/br]
[font=Pridi]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/font][/div]
[/div]
[div class="sample"; style="margin:25px; margin-top:0px"]Writing samples go here.[/div]
[/div]
[/nobr]