I'm having some trouble aligning my dropdown menu in my angular app.
Please see the screenshot attached. The menu extends too far right of the screen. I need it to align to the "top right" of the ellipses instead of the "top left" as it is currently. The menu is currently functioning in a table.
Any assistance in getting the menu to shift to the left would be greatly appreciated.
Here is the HTML/CSS:
<td class="dropup">
<div class="dropup">
<button style="background-color: white;" class="dropbtn">
<img class="icon" src="assets/ellipsis.png">
</button>
<div class="dropup-content">
Admin Functionality
Download Project Snapshot
<a [routerLink]="['/project/'+j._id+'/project-activity']">View Project Activity</a>
Archive Project
<a *ngIf="j.creatorid != user._id" (click)="onLeaveProjectClick(j._id, j.projectname, n)">Leave Project</a>
</div>
</div>
</td>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropup {
position: relative;
display: inline-block;
float:right;
}
.dropup-content {
display: none;
position: absolute;
transform-origin: 60% 40%;
top: 20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
}
.dropup-content :hover {
border-radius: 10px;
}
.dropup-content a {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {
background-color: #ddd;
color: #00aca8 !important;
}
.dropup:hover .dropup-content {
display: block;
border-radius: 10px;
}
As you set .dropup-content to absolute, it will be left aligned relative to .dropup as .dropup-content is within .dropup. But as your class is already absolute, simply add:
right: 0;
left: auto; // Unsure if you really need this though
to .dropup-content. This will take care that the class is right aligned relative to .dropup.
add to class .dropup-content this:
right:0;
https://jsfiddle.net/b1stpfr4/2/
Related
Simply put, I want to make an icon button with text that downloads a file when the user clicks it, and my html code isn't doing that. The twist is, I have an icon button elsewhere on my page to do that exact same thing, and that one works.
The reason I'm including this ability twice in my page is because I want the user to be able to download this file no matter where they are in the page. The icon-button-with-text is the expected go-to place to get the file because it has an icon and text explaining what the button does. Here's its example code:
button {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
.button1 a {
color: black;
}
.button1 a:hover {
cursor: pointer;
}
.button1 span {
position: absolute;
top: 0px;
left: 42px;
}
.activeState {
display: none;
}
.inactiveState {
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .activeState {
display: inline-block;
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .inactiveState {
display: none;
}
<button class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</button>
However, the icon-button-with-text is part of the body content, and so will scroll up and out of sight as the user goes through the page. So that the user can download the file no matter where they are in the page, I made an icon-button in my fixed top app bar. Here's its example code:
li {
list-style-type: none;
}
.icon {
width: 24px;
height: 24px;
padding-top: 8px;
text-align: center;
}
.inactiveState {
height: 24px;
width: 24px;
top: 16px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.activeState {
display: none;
height: 24px;
width: 24px;
top: 16px;
margin-left: 12px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
li:active .inactiveState {
display: none;
}
li:active .activeState {
display: block;
margin-left: auto;
margin-right: auto;
}
li:hover {
cursor: pointer;
background: none;
outline: 2px black solid;
border-radius: 4px;
}
<li class="icon downloadResume">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
</li>
The icon-button was part of a menu of other links, so I made it a list item instead of an actual button.
Both buttons have the same icons and the same link states for those icons. Aside from the icon-button not having text and being a list item instead of a button proper, I don't see any difference between the two.
And yet, when I click on the icon-button, my file downloads. When I click on the icon-button-with-text, the icon state also changes like it's supposed to, but the file doesn't download. There's not even a snackbar in the corner mentioning the address of the file when I hover over the icon-button-with-text, whereas that happens when I hover over the icon-button.
Why is this happening, and what can I do so that the same file downloads from the two buttons?
Thank you in advance!
You must not wrap an anchor in a button. Both elements are clickable, so behavior is not really consistent accross browsers ¹ ²
Alas, W3C's validator reports an error when nesting those elements, so it simply is not valid HTML.
Error: The element a must not appear as a descendant of the button element.
<button>stackoverflow</button>
Instead, replace your button with a div:
<div class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</div>
And of course change your CSS accordingly:
div.button1 {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
/* ... */
If file's path is files\downloadableFile.pdf then in href="" set the path and in download="" set the file.
<a href="files" download="downloadableFile.pdf">
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
I incorporated a Material-Floating Button to my web page and the functionality is working perfectly the way I want it to. The only issue I am having is the icons I have set up for them are not appear centered but, appears at the top of the button. It appears that the css line-height is not working.
Image of what appears on my webpage: Icon at top of Button
Link for Material-Floating Button: Material-Floating Button
Link for Demo of where the icon should be at: Demo
HTML Code:
<ul class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<!-- the main menu button -->
<a href="#" class="mfb-component__button--main">
<!-- the main button icon visible by default -->
<i class="mfb-component__main-icon--resting ion-plus-round"></i>
<!-- the main button icon visible when the user is hovering/interacting with the menu -->
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<!-- a child button, repeat as many times as needed -->
<li>
<a href="#" data-mfb-label="Edit This Action" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-edit"></i>
</a>
</li>
</ul>
</li>
</ul>
Part of CSS Code:
.mfb-component__button--main, .mfb-component__button--child {
background-color: #E40A5D;
display: inline-block;
position: relative;
border: none;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
cursor: pointer;
outline: none;
padding: 0;
position: relative;
-webkit-user-drag: none;
color: #f1f1f1; }
/**
* This is the unordered list for the list items that contain
* the child buttons.
*
*/
.mfb-component__list {
list-style: none;
margin: 0;
padding: 0; }
.mfb-component__list > li {
display: block;
position: absolute;
top: 0;
right: 1px;
padding: 10px 0;
margin: -10px 0; }
/**
* These are the basic styles for all the icons inside the main button
*/
.mfb-component__icon, .mfb-component__main-icon--active,
.mfb-component__main-icon--resting, .mfb-component__child-icon {
position: absolute;
font-size: 18px;
text-align: center;
line-height: 56px;
width: 100%; }
.mfb-component__wrap {
padding: 25px;
margin: -25px; }
I think you're right about the line-height. Is there another css rule somewhere over-riding it?
Try adding and important to target it a bit better.
line-height: 56px !important;
If that doesn't work add some parent elements before you're css rule like #menu and .mfb-component__wrap
#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
position: absolute;
font-size: 18px;
text-align: center;
line-height: 56px;
width: 100%; }
If neither of the above work just use 'top' as a workaround instead.
#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
position: absolute;
font-size: 18px;
text-align: center;
line-height: 0px;
width: 100%;
top: 17px; }
Hope that sorts it for you!
I'm trying to fix my menu code so that when I hover over the button, the dropdown menu will be in line with the left edge of the button. Right now it is spaced a bit to the right like a list.
HTML:
<center>
<div class="menubar">
<button class="button">Forms
<div class="menubar-content">
Department Update Form
Project Start Month Form
Add New Employee Form
</div>
</button>
<button class="button">Reports
<div class="menubar-content">
Human Resource's Employees Report
</div>
</button>
<button class="button">Reports
<div class="menubar-content">
Human Resource's Employees Report
2012 04 Product Plan Project Report
Department Data Report
Employee Business Info Report
</div>
</button>
</div>
</center>
CSS:
.button {
background-color: blue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
margin:5px;
}
.menubar {
position: relative;
display: inline-block;
}
.menubar-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin: 16px;
}
.menubar-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menubar-content a:hover {
background-color: #f1f1f1;
}
.button:hover .menubar-content {
display: block;
}
.menubar:hover .dropbtn {
background-color: #3e8e41;
}
It's responding to the padding you have on the button because it's within the <button> tag. So you simply counter it with a negative margin on the div.
.menubar-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin: 16px;
margin-left: -16px; //add this line
}
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/
I'm writing a CSS framework and when it comes to handling buttons I'm trying to make it so that the user can segment the button (this is done, see the fiddle below) - however, I want to add another semantic CSS selector that will allow the user to positon this left/right of the button text (automatically right). My issue is, however - I don't want to affect the HTML in any way, the HTML structure is the same for every other button, so I'd rather not altar this if possible.
I've tried floating the segment left, afterwards I thought it was pretty obvious that wouldn't work - the height of the button is also dependent on the padding of the segment - so (as far as I'm aware) it's not possible to position this absolutely. I'm having a mental block as to how to achieve this.
Here is my current CSS:
.dte.button {
border-radius: 0;
display: inline-block;
border: 0;
outline: 0;
padding: 10px;
background: #34495e;
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s all;
position: relative;
}
button.dte.button.segmented {
padding: 0;
padding-left: 10px;
position: relative;
}
.dte.button .segment {
filter: brightness(50%);
background: rgba(0, 0, 0, 0.53);
padding: 10px;
display: inline-block;
margin-left: 10px;
}
And my HTML structure
<button class="dte button segmented">
This should align the segment RIGHT (it does)
<div class="segment">
<i class="fa fa-align-right"></i>
</div>
</button>
<button class="dte button segmented left">
This should align the segment LEFT(It doesn't)
<div class="segment">
<i class="fa fa-align-left"></i>
</div>
</button>
Fiddle of what I current have.
It is not pretty, but you can use float:left if you then fix your spacing with some negative margins.
So for example:
.dte.button {
border-radius: 0;
display: inline-block;
border: 0;
outline: 0;
padding: 10px;
background: #34495e;
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s all;
position: relative;
}
button.dte.button.segmented {
padding: 0;
padding-left: 10px;
position: relative;
}
button.dte.button.segmented.left {
padding: 10px 10px 10px 0;
}
.dte.button .segment {
filter: brightness(50%);
background: rgba(0, 0, 0, 0.53);
padding: 10px;
display: inline-block;
margin-left: 10px;
}
.dte.button.left .segment {
float: left;
margin: -10px 10px -10px 0;
}
<div style="padding: 20px;">
<button class="dte button">dte-button</button>
<button class="dte button segmented">
Dropdown Button
<div class="segment">
ICON
</div>
</button>
<button class="dte button segmented">
Segment Aligned Right
<div class="segment">
ICON
</div>
</button>
<button class="dte button segmented left">
Segment Aligned Left
<div class="segment">
ICON
</div>
</button>
</div>
Here also a fiddle.