So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
Related
I am trying to iterate over the colors array of alpine's x-data and inside every button trying to get and then set the color value via livewire's underlying alpine object $wire's $wire.set method.
However it gives me error that $wire is not defined in any place whether it is inside #click or if function like setColor is defined and then I access $wire over there.
button {
padding: 0;
background: none;
border: none;
}
button span {
display: inline-block;
width: 15px;
border-radius: 10px;
margin: 4px;
height: 15px;
}
<script src="https://unpkg.com/alpinejs#3.10.3/dist/cdn.min.js"></script>
<div class="space-x-2 mb-2" x-data="{
colors:['#800000','#e50000','#ff4081',
'#ff7fab','#f900ea','#ea80fc',
'#bf55ec','#9b59b6','#7c4dff',
'#0231e8','#81b1ff','#3397dd',
'#3082b7','#04a9f4','#02bcd4',
'#1bbc9c','#2ecd6f', '#f9d900',
'#af7e2e','#ff7800','#e65100',
'#b5bcc2','#667684'],
setColor(value) {
$wire.set('status.color', value)
}
}">
<!-- Also $wire not working inside #click directly -->
<template x-for="(color,index) in colors">
<button #click="setColor(color)" class="btn p-0 shadow-none" type="button" #click="setColor(color)">
<span :style="{'background-color': color}">
</span>
</button>
</template>
</div>
I'm using CSS3 inline in the html, and since images seem to be referenced by the css stylesheet location, how can I link to images without one?
When I do this:
<input type="image" name='voteup' value="Up" src="/index/images/ArrowUp.PNG"/>
It gives me a broken link of this value:
http://localhost/index/images/ArrowUp.PNG
and this:
.myButtonDown {
background:url('images/ArrowDown.PNG') no-repeat;
cursor:pointer;
width: 36px;
height: 36px;
border: none;
}
.....
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>
Is just blank....
Use this and put your image in images folder.
.myButtonDown {
background: url( 'images/ArrowDown.PNG' ) no-repeat;
border: none;
cursor: pointer;
height: 36px;
width: 36px;
}
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>
When hovering over an item how do I make it so the border wont change?
In the css I don't do anything to the borders,
#ALink:hover #SubMenu {
display: block;
position: relative;
top: 20px;
left: -18px;
}
As you can see in this JSFiddle, when you hover over A the border extends to the submenu. How do I make it not happen? (keep the border where it is)
JSFiddle
You are making #SubMenu visible, and SubMenu is wrapped in #ALink. When you make a child visible, parent re-sizes to show child element.
One solution can be as following. Of course you need to cleanup your css and make it beautiful again:
<a id="ALink" href="#">
<label>A</label>
<ul id="SubMenu">
<li class="items-2">Item 1</li>
<li class="items-2">Item 2</li>
<li class="items-2">Item 3</li>
</ul>
</a>
a > label {
display: block;
padding-left: 17px;
margin-top: 5px;
line-height: 40px;
font-size: 20px;
border: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color: #f3f3f3;
}
Check it out: http://jsfiddle.net/Zuct2/1/
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.