I have ul list in div and if I set div height and overflow-y
It becomes scrollable.
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>
</ul>
</div>
However when I add items by append of jquery.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>Add this few times<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>`);
There never appears scroll bar.
Is this the way to make scrollbar for dynamically added <li> ?
How should I solve this??
There were a few syntax errors in your code.
You were also missing the closing quote in $("#mainul") though Michelangelo edited it.
This works below.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>
Add this few times<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>
</ul>
</div>
Related
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
Here is the fiddle I am working on right now
http://codepen.io/trippygif/pen/KVWYdV
Here is the HTML
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Basically I am having trouble with the Bootstrap alignment that occurs in the "about" div. I cannot seem to get the paragraph on the left side of the page and the list on the right side of the page. I assume something might be wrong with my CSS. Any suggestions would be much appreciated :)
If your problem is that the "About Me" heading and the list doesn't start in the same vertical height, then you have to do something with your .to-fit CSS rule where you set a padding-top : 80px;.
Just give a properly sized top padding or margin to your right block:
<div class="col-md-6" style="margin-top:120px;">
<p>My Proficiencies</p>
...
or
<div class="col-md-6" style="padding-top:120px;">
<p>My Proficiencies</p>
...
Of course you can/should place this rule to a CSS rule with a selector of your choice.
change class container tocontainer-fluid
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Now I'm having trouble finding out how to get a list-group working. I want a panel on the left side, using col-lg-9. On the right side there's a selection menu, using col-lg-3.
I wan't this selection menu to dynamically change the content of the page. So when I click on item 1, the panel provides info that is meant to be for item 1.
So far I've come to this, but this doesn't work yet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9'>
<div class='panel panel-default' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<div class='list-group'>
<a href='#panel1' class='list-group-item active' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
<a href='#panel2' class='list-group-item' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</div>
</div>
</div>
</div>
If I understand you correctly, you need to combine that tabs and the item-list components.
Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9 tab-content'>
<div class='panel panel-default tab-pane active' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default tab-pane' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<ul class='list-group'>
<li class="list-group-item active">
<a href='#panel1' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
<li class="list-group-item">
<a href='#panel2' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
</ul>
</div>
</div>
</div>
I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});