Develop Reference

Unable to get prime-ng table pagination dropdown to hover over everything

I have been using mat-tab in conjunction with prime-ng table and have been trying really hard to make sure that pagination drop down number doesn't get clipped off as seen in the image below.
I have checked and made sure that the pagination dropdown has the highest z-index, but haven't gotten any success so far. Any help and suggestions would be appreciated.
.mat-tab-label.mat-tab-label-active {
background-color: #105b63;
color: #fff;
/* border: 1px solid lightgray; */
padding: 15px 25px;
border-radius: 5px 5px 5px 5px;
}
.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background: #105b63;
height: 0px;
}
/* .mat-tab-body.mat-tab-body-active,
.mat-tab-body,
.mat-tab-body-content,
.mat-tab-body-wrapper {
overflow: inherit !important;
} */
.example-loading-shade {
position: absolute;
top: 0%;
left: 0%;
bottom: 0px;
right: 0%;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mat-progress-spinner circle,
.mat-spinner circle {
stroke: #105b63;
}
.red-box-outlining {
display: inline-block;
padding: 10px 20px 20px;
border: 1px solid #bd4932;
border-radius: 5px;
margin: 15px 15px 20px 15px;
width: 228px;
}
.messages-service-logo {
width: 135px;
padding: 5%;
}
.listContainer {
padding: 20px;
}
:host ::ng-deep .p-dropdown-panel {
transform-origin: center bottom !important;
top: -119px !important;
left: 0 !important;
}
.pageOperationsBtns {
display: flex;
justify-content: end;
}
.pageOperationsBtns>.addVoiceMsgBtn {
border: 2px solid #105b63;
color: white;
background-color: #105b63;
font-weight: 500;
padding: 0.3rem 1rem;
margin: 8px 3px;
/* float: right; */
}
.pageOperationsBtns>.addTextMsGBtn {
border: 2px solid #105b63;
color: white;
background-color: #105b63;
font-weight: 500;
padding: 0.3rem 1rem;
margin: 8px 3px;
/* float: right; */
}
#media screen and (max-width: 500px) {
.pageOperationsBtns {
justify-content: center;
}
.pageOperationsBtns>.addVoiceMsgBtn,
.pageOperationsBtns>.addTextMsGBtn {
font-size: 0.85rem;
}
}
#media screen and (max-width: 40rem) {
.listContainer {
padding: 0;
}
}
<p-toast [baseZIndex]="10000"></p-toast>
<diV>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
</diV>
<div class="main" style="height: 100%;">
<div class="container-fluid">
<div>
<h2 style="color: #105B63;">
<!--<i class="fa fa-sliders"></i>-->
<img id="ManageMsgIcon" src="./../../../assets/Images/manage msg.png" alt="Manage Messages" style="width: 25px; vertical-align: initial;"> Manage Messages
</h2>
<div class="row">
<div class="col-sm-12">
<!-- <div style="text-align: center;">
<div class="page-operations-container">
<img id="VoiceMsgIcon" src="./../../../assets/Images/create voice.png" alt="Voice Message" class="messages-service-logo">
<br />
<a routerLink="" (click)="onCreateVoice()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary" title="Create Voice Messages"><i class="fa fa-bullhorn"></i> Create Voice Message</a>
</div>
<div class="page-operations-container">
<img id="TextMsgIcon" src="./../../../assets/Images/create text.png" alt="Text Message"class="messages-service-logo">
<br />
<a routerLink="" (click)="onCreateMessage()" [routerLinkActive]="['router-link-active']" class="btn btn-secondary" title="Create Text Messages"><i class="fa fa-comment"></i> Create Text Message</a>
</div>
</div> -->
<div class="pageOperationsBtns ">
<button type="button" (click)="onCreateVoice()" class="btn btn-lg addVoiceMsgBtn" style="font-size: 14px;">
<i class="fa fa-bullhorn fa-lg" style="margin-right: 6px;"></i>Create Voice Message
</button>
<button type="button" (click)="onCreateMessage()" class="btn btn-lg addTextMsGBtn" style="font-size: 14px;"> <i class="fa fa-comment fa-lg" style="margin-right: 6px;"></i>Create Text Message</button>
</div>
</div>
</div>
<div>
<mat-tab-group mat-stretch-tabs class="example-stretched-tabs" [selectedIndex]="Tabs.value" (selectedIndexChange)="onTabChange($event)">
<mat-tab>
<div class="example-loading-shade" *ngIf="isLoadingResultsVoice">
<mat-spinner *ngIf="isLoadingResultsVoice"></mat-spinner>
</div>
<ng-template mat-tab-label>
<i class="fa fa-bullhorn fa-lg"></i>
<span style="margin-left:5px;">Voice Messages</span>
</ng-template>
<div style="border: 1px solid lightgray;">
<div class="listContainer">
<app-voice-list [$dataSource]="dataSourceVoice" [$SelectedData]="SelectedDataVoice" [$Type]="TypeVoice" [$cols]="colsVoice" (OutputSelectedData)="onSelectedDataVoice($event)" (OutputViewVoice)="onViewVoice($event)" (OutputDeleteVoice)="onDeleteVoice($event)"
(OutputPaginationNumberVoice)="paginationNumberChangeVoice($event)">
</app-voice-list>
<!-- <app-table-selection-tile [messagetype]="'Voice Message'"
[$TotalSelected]="TotalSelectedVoice">
</app-table-selection-tile> -->
</div>
</div>
</mat-tab>
<mat-tab>
<div class="example-loading-shade" *ngIf="isLoadingResultsText">
<mat-spinner *ngIf="isLoadingResultsText"></mat-spinner>
</div>
<ng-template mat-tab-label>
<i class="fa fa-comment fa-lg"></i>
<span style="margin-left:5px;">Text Messages</span>
</ng-template>
<div style="border: 1px solid lightgray;">
<div class="listContainer">
<app-text-list [$dataSource]="dataSourceText" [$SelectedData]="SelectedDataText" [$Type]="TypeText" [$cols]="colsText" (OutputSelectedData)="onSelectedDataText($event)" (OutputEditText)="onEditText($event)" (OutputDeleteText)="onDeleteText($event)" (OutputPaginationNumberTxtMsg)="paginationNumberChangeTxtMsg($event)">
</app-text-list>
<!-- <app-table-selection-tile [messagetype]="'Text Message'"
[$TotalSelected]="TotalSelectedText">
</app-table-selection-tile> -->
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>

try working with primeng documentation they use
<p-table
[paginator]="true"
[rows]="6"
[rowsPerPageOptions]="[6, 10, 20]" >

try use paginatorDropdownAppendTo="body" in p-table

Buttons Overlays

The thing is I want to create an overlay for every meal we're selling and I want to activate it through the "Order" button but the problem is I can't seem to know how to target each specific button in order to give every button a diffrent overlay
Here is the html
<div class="container">
<div class="MenuItems">
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
<img src="Sirloin.jpg">
<button onclick="on()">Order Now</button>
<img src="Skirt.jpg">
<button onclick="on()">Order Now</button>
<img src="T-Bone.jpg">
<button onclick="on()">Order Now</button>
<img src="TomahawkSteak.jpg">
<button onclick="on()">Order Now</button>
<img src="Flank.jpg">
<button onclick="on()">Order Now</button>
<img src="Chuck.jpg">
<button onclick="on()">Order Now</button>
<img src="BBQChuck.jpg">
<button onclick="on()">Order Now</button>
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
</div>
<div class="left">
<div class="SideMenu">
<ul>
<li>Steak</li>
<li>Chicken</li>
<li>Appietizers</li>
<li>Bevreges</li>
<li>Desserts</li>
</ul>
</div>
</div>
</div>
This is supposed to be one of the overlays however I need to create multiple others and be able to assign them to any button of my choice
<div id="over">
<img src="r.png">
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<script type="text/javascript" src="MenuJS.js"></script>
</body>
</html>
Javascript :
function on() {
document.getElementById("over").style.display = "block";
}
function off() {
document.getElementById("over").style.display = "none";
}
Here is the CSS:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#over{
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
cursor: pointer;
}
#over img {
position: relative;
left: 35%;
top: 25%;
border: 2px crimson;
width: fit-content;
border-style: inset;
height: 280px;
width: 280px;
}
.CloseBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
left: 1500px;
border-radius: 5px;
position: relative;
bottom: 220px;
}
.AddBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 750px;
top: 200px;
width: 30px;
}
.SubtractBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 760px;
top: 200px;
width: 30px;
}

You can pass this as a parameter when calling the function, and access the element which was clicked via event.target within the function
HTML:
<button onclick="on(this)">Order Now</button>
JS:
function on() {
console.log(event.target)
}
For the functionality you're looking for, your approach will depend on how you structure your HTML.
For the most basic approach, you can do the following:
HTML:
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 1</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 2</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 3</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
JS:
function on() {
event.target.nextElementSibling.style.display = 'block'
}
function off() {
event.target.parentElement.style.display = 'none'
}
This is utilizing nextElementSibling (because the next element after the button is the overlay) and parentElement (the container of closeBtn which is the overlay)

My buttons go down when I press them

I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.
$(document).ready(function(){
var against = 'human';
var board = ['-','-','-',
'-','-','-',
'-','-','-'];
var turn = 'X';
$('.xo-btns').click(function(){
$(this).text(turn);
});
});
body{
padding: 0px;
margin: 0px;
width: auto;
height: auto;
background: black;
font-family: 'Raleway', sans-serif;
}
.container{
text-align: center;
}
.board{
display: inline-block;
text-align: center;
background: red;
padding-top: 15px;
padding-left: 10px;
height: 250px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.xo-btns{
width: 70px;
height: 70px;
padding: 0px;
border-radius: 4px;
background: transparent;
outline: none;
color: white;
/* display: inline-block; */
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="board">
<button class="xo-btns" id="one" value="1"></button>
<button class="xo-btns" id="two" value="2"></button>
<button class="xo-btns" id="three" value="3"></button>
<br>
<button class="xo-btns" id="four" value="4"></button>
<button class="xo-btns" id="five" value="5"></button>
<button class="xo-btns" id="six" value="6"></button>
<br>
<button class="xo-btns" id="seven" value="7"></button>
<button class="xo-btns" id="eight" value="8"></button>
<button class="xo-btns" id="nine" value="9"></button>
<br>
</div>
</div>
How can I fix it so every time I press one of them, they stay where they started.
Thank you!

This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.
Add
vertical-align: middle; to your "xo-btns" class and you should be fine.

Show and hide not working in Firefox with jQuery version 3.1.0

I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.

The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}

This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp

Aligning text vertically from top to bottom HTML5 CSS3

I have a multilingual web page. It is required to show the labels on the button on the page upside down. I am using the following CSS:
HTML:
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>
CSS:
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
}
So the output is something like this:
The Japanese characters are displayed perfectly according to desire, but the alphabets and numbers aren't, I want BASIC2 to be like the Japanese characterslike
B
A
S
I
C
2
How can I achieve this?
EDIT FOR EXPLANATION:
I am using the same logic to transform my text, but if you look at the Japanese characters they get transformed smoothly, while the normal alphabet characters tend to "ROTATE" I don't want the rotation for English characters, why can't they be displayed the same as Japanese characters.

Use text-orientation: upright; this will solve the problem.
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
text-orientation: upright;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>

Updated
Below samples work cross browser , which text-orientation doesn't (yet).
Simplest would be like this, using <br>, manually added or with script.
var elems = document.querySelectorAll('.test div');
for (var i = 0; i < elems.length; i++) {
elems[i].innerHTML = elems[i].textContent.split('').join('<br>')
}
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display: inline-block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
text-transform:uppercase;
font-size-adjust:0.5;
}
.divider{
border-top: 1px solid;
padding: 10px 0;
margin-top: 10px;
}
<button class="btn btn-primary topdown-button">
<div>お<br>客<br>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B<br>a<br>s<br>i<br>c<br>2</div>
</button>
<div class="divider">Sample using script</div>
<button class="btn btn-primary topdown-button test">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button test">
<div>Basic2</div>
</button>
2:nd alternative, using word-break
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
text-align: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
margin: 0 auto;
word-break: break-all;
width: 12px;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic2</div>
</button>

you can utilize flexbox to make you css look more clean. Look this pen
HTML
<button class="btn btn-primary topdown-button">
<div>お</div>
<div>客</div>
<div>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B</div>
<div>A</div>
<div>S</div>
<div>I</div>
<div>C</div>
<br>
<div>2</div>
</button>
CSS
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
}