I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
Related
Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
I have broken my head on the following css.
JSFiddle:
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?
Important: The div heights should not be changed to show the dropdown menu.
Remove overflow: auto on .first-row
$(document).on('click', '.dropdown', function() {
$(this).find('.dropdown-content').toggle();
});
#new_task_wrap {
position: relative;
display: flex;
}
#new_task_wrap > .box {
width: 100%;
border-style: solid;
border-color: #98afc8;
}
#new_task_wrap > .box > .first_row {
display: flex;
width: 100%;
/*overflow-y: auto;*/
}
#new_task_wrap > .box > .first_row > .description {
background-color: white;
display: inline-block;
font-weight: 400;
padding: 9px 9px 9px 9px;
cursor: text;
outline: 0;
flex-grow: 1;
overflow-y: auto;
}
#new_task_wrap > .box > .first_row > .calendar {
padding-top: 8px;
cursor: pointer;
}
.right-add-on {
position: relative;
}
.right-add-on >:not([contenteditable=true]) {
position: absolute;
right: 0;
color: #67829e;
cursor: pointer;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Updated jsFiddle
Just change overflow-y to visible
Refer this
The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.
#new_task_wrap > .box > .first_row {
display: flex;
overflow-y: visible; //Here is the change
width: 100%;
}
use position: absolute for .dropdown and position it accordingly
here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/
ALL COMPONENTS ARE DISPLAYED OK. BUT WHEN I PRESS F12 AND HOVER OVER NAVBAR-LEFT, it's height is that of 0px. I think I need to solve this by placing a small div with class clear somewhere, but I don't know where exactly!
<div class="core-container">
<div class="core-content">
<div class="navbar">
<div class="navbar-left">
<div class="navbar-logo">
LOGO
</div>
<div class="navbar-suggestions">
SUGGESTIONS
</div>
<div class="navbar-notifications">
NOTIFICATIONS
</div>
<div class="clear">
</div>
</div>
<div class="navbar-right">
<ul>
<li>Profiles & Schedules</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
css code:
/MASTER PAGE/
.core-container
{
margin-top: 100px;
border: 1px solid black;
}
.core-content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px 10px 20px;
}
.navbar
{
border: 1px solid red;
padding: 10px 5px 10px 5px;
}
.navbar-right div
{
float: right;
}
.navbar-left div
{
border-right: 1px solid red;
float: left;
padding-right: 10px;
margin-right: 10px;
}
.navbar-right ul li
{
list-style-type: none;
float: right;
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid red;
}
.clear
{
clear: both;
}
Yes, everything in your navbar-left is floating, so its height remains 0. But is that a problem? It looks good on the screen!
Anyway, the quick answer is to append float:none to the style for the clear class. Make sure you make it specific enough to override the styles for .navbar-left div and navbar-right div though, like this:
.navbar-left .clear, .navbar-right .clear
{
clear: both;
float:none;
}
Reason is that your clear DIV also have float on it because you define class like this:
.navbar-right div
{
float: right;
}
write like this:
.navbar-right .clear
{
float: none;
}
I'm trying to build a searchbox with label filters tucked to the left of the box, my markup looks something like this:
<div id="searchbox">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<input id="input" value="search query">
</div>
I put one of my attempts in a jsfiddle:
http://jsfiddle.net/nSDV9/7/
I want the input element to use all the remaining space in the searchbox, regardless of the number of filter elements tucked to the left of it (including zero). I have tried to apply the float/overflow:hidden/etc. tricks I could find, but I haven't been able to get the effect I want.
You can do like this:
http://jsfiddle.net/nSDV9/9/
Html:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="searchwrap">
<input id="searchbox" value="search query">
</div>
</div>
Css:
#container{
width: 500px;
background: red;
overflow: hidden;
position: relative;
}
.searchwrap{
background:green;
overflow:hidden;
position:relative;
height:20px;
}
.filter{
float:left;
background-color: green;
color: white;
font-weight: bold;
}
#searchbox {
position: absolute;
border: 0;
background: yellow;
left: 0;
width:100%;
}
See: http://jsfiddle.net/thirtydot/nSDV9/8/
HTML:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="search-container"><input id="searchbox" value="search query"></div>
</div>
CSS:
#container{
width: 500px;
background: #ccc;
overflow: hidden;
position: relative;
}
.filter{
float: left;
margin-top: 4px;
margin-right: 4px;
background-color: green;
color: white;
font-weight: bold;
}
.search-container {
overflow: hidden;
padding: 4px;
}
#searchbox {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This is the cleanest I could make:
http://jsfiddle.net/nSDV9/11/
How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}