I'm having trouble creating a drop-up menu with w3.css. What I'm trying to do is have a drop-up menu as the second element from the right on a footer fixed to the bottom of the viewport.
Here's what I have so far:
<footer class="w3-bar" style="position: fixed; bottom: 0;">
<span class="w3-bar-item">Button 1</span>
<span class="w3-bar-item">Button 2</span>
<span class="w3-bar-item w3-right">(Date Here)</span>
<div class="w3-dropdown-hover w3-right" style="position: relative; bottom: 0;">
<button class="w3-bar-item w3-button w3-hover-theme">Change Theme</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-d4" style="min-width: 100%; right: 0; bottom: 100%;">
Theme 1
Theme 2
Theme 3
Theme 4
</div>
</div>
</footer>
It works exactly as I want (it puts the drop-up menu right on top of the button, which is placed where I want it), except the options aren't visible (because they overflow above the footer bar).
Here's a link to a fiddle-like thing, I changed the "bottom" property of my w3-dropdown-content to 50% so you can see the bottom of the menu. https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44
Thanks by advance to anyone who'd try to help :)
Edit : I've still haven't found a way to have it show as I want. By changing the position of my w3-dropdown-hover element to absolute, the drop-up menu displays correctly, but the item is added to the left of the bar, instead of the right.
Well, you answered your own question: the propertie "overflow" in w3-bar is defined as "hidden". You could add "overflow:visible" after "bottom:0".
Related
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
I have a main component:
<md-sidenav-layout fullscreen>
<md-sidenav #sidenav>
<md-nav-list>
<a md-list-item *ngFor="let view of views">
<md-icon md-list-icon>{{view.icon}}</md-icon>
<div style="clear:right"></div>
<div class="description-wrapper">
<span md-line>{{view.name}}</span>
<span md-line class="secondary">{{view.description}}</span>
</div>
</a>
</md-nav-list>
</md-sidenav>
<md-toolbar *ngIf="!menuToolbarConfig.IsLoginView">
<div (click)="menuToolbarConfig.goToApprovals()" class="goBack" *ngIf="menuToolbarConfig.IsDetailView">
<md-icon>navigate_before</md-icon>
</div>
<button *ngIf="!menuToolbarConfig.IsDetailView" md-icon-button (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button> {{menuToolbarConfig.ToolbarTitle}}
<!--<button md-fab>
<md-icon>add</md-icon>
</button>-->
</md-toolbar>
<router-outlet></router-outlet>
</md-sidenav-layout>
<div style="background-color: red; height: 30px; width: 100%; position: fixed; top: 0px"></div>
As you can see I am using the official Angular2 material-framework. On every page the toolbar and the sidenav should appear, so I put the <router-outlet> in the <md-sidenav-layout>. Everything is fine, but now I want to create a snackbar that appears out of the bottom of the screen and should be fixed to the bottom. Now I have the problem, when I place the snackbar in a inner-component, that replaces the <router-outlet>, and I want to set the snackbar 'position: fixed' the snackbar would be correctly shown in the bottom of the page, but if I scroll, than the snackbar dont stay at the bottom instead its hovering over the bottom. But when I place a test div (last line) outside the <md-sidenav-layout> it works fine. So the problem is, that the fixed snackbar/div is within the <md-sidenav-layout>. But I need to have the snackbar in my inner-component.
My question now: Is there any smart solution to fix this problem, without a big workaround?
Thank you in advance!
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
I have a list, like this:
<ul id="categoryTabsId" class="categoryTabs">
<li onclick="tabs(this);" class="selected" id="tab1">
<span class="tab-one">
<img src="http://www.dot.ca.gov/hq/jobs/images/number1_icon.jpg" />
</span>
some text
</li>
</ul>
The CSS which manipulates the image position is:
position: relative;
top: 0;
left: -20px;
The CSS moves the image to the right position, but the image is not displayed completely, it seems a part of the image is behind something else. I tried using z-index: 999999999 but this wont change a thing. Why is the image not on top of everything with such a high z-index?
Thanks!
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me