I cannot seem to create a paper button that allows me to use it as a selector for closing a paper-dialog. I have a feeling this is a CSS issue, but I could be wrong. The button gets created after all of the elements and when you switch tabs, it essentially re-creates the button into a new div. Below is my code for the CSS, Dialog setup, and the Dart code. Please let me know if you need more information from me.
Dart and markup:
PaperButton button;
button = new PaperButton();
button.label = "Close";
settingsDialog.children.add(button);
settingsDialog.autoCloseDisabled = true;
settingsDialog.closeSelector = "paper-button";
<paper-dialog id="properties" style='background-color:#fbfbfb; margin: 0 auto; border-style: double; border-color: #FEB33F; position:fixed;'>
<paper-tabs id="Tabs" noink="true" selected="{{page}}" style='width:250px; height:30px; color:#333333;'>
<paper-tab id="sTab">S</paper-tab>
<paper-tab id="uTab">U</paper-tab>
</paper-tabs>
<core-pages selected="{{page}}">
<div id="s">
<!--Page one -->
</div>
<div id="u">
<!--Page two -->
</div>
</core-pages>
</paper-dialog>
CSS:
paper-button
{
margin-top:7%;
float:right;
margin-bottom: -15px;
background-color:#f0f0f0;
border-top: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
width:65px;
height:45px;
position:fixed;
margin-left:25%;
}
If you use a paper-button you should use paper-button as selector. Why do you think button is a valid selector for a paper-button?
Related
I am developing an Angular 7 web application and am struggling with a Mat-Selection-List where I allow the user to drag and drop the mat-list-option items.
Each mat-list-option item comprises a div which uses Flex Layout to arrange its components as follows:
<mat-selection-list #taskGroupSelectionList
cdkDropList
[(ngModel)]="selectedOptions"
(ngModelChange)="onNgModelChange($event)"
(selectionChange)="onSelectionChange($event)"
class="task-group-list"
(cdkDropListDropped)="drop($event)">
<mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>
<!-- Task Group Item -->
<div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">
<!-- Move Handle -->
<div fxFlex="32px" style="padding: 0 0 0 4px;">
<mat-icon class="summary-channel-handle">menu</mat-icon>
</div>
<!-- Index -->
<div fxFlex="24px;">
<p style="margin: 0; text-align: right;">
{{taskGroup.orderId}}:
</p>
</div>
<!-- Title -->
<div fxFlex="nogrow">
<p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
{{taskGroup.title}}
</p>
</div>
</div>
</mat-list-option>
</mat-selection-list>
The key CSS styles for this simple component are as follows:
.task-group-list {
width: 100%;
height: 100%;
display: block;
background: white;
}
.task-group-box {
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
border-bottom: solid 1px #ddd;
border-radius: 4px;
height: 48px;
color: rgba(0, 0, 0, 0.87);
box-sizing: border-box;
cursor: move;
background: white;
}
.task-group-box:first-child {
border: solid 1px #ddd;
}
.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Functionally I can drag and drop the list items, however when dragging, the mat-list-option checkbox which I have placed on the right checkboxPosition="after" moves to the top left corner and pushes the elements of the mat-list-option down.
Does anyone know why the layout changes on dragging please?
The element being dragged can be found as the last child of body in the DOM (only on drag), and this creates quite some problems as you can read here.
If your mat-list-option element is not very complex, only the checkbox and some text, you can solve this by adding some CSS to the global styles.css file, for example:
/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
display: flex;
align-items: center;
}
/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
margin-right: 10px;
}
You can see a DEMO in this stackblitz that I created.
If the content of your mat-list-option element is a bit more complex you will need to inspect the element and add the necessary styles. You can do this by dragging the mat-list-option and right clicking while dragging, inspect element and find classes that you can use to style it.
A better alternative might be to just create a custom cdkDragPreview. You can style this as you wish.
<mat-selection-list #movies cdkDropList>
<mat-list-option *ngFor="let movie of movies" cdkDrag>
{{movie}}
<ng-template cdkDragPreview [matchSize]="true">
<div class="movie-preview">
{{ movie }}
</div>
</ng-template>
</mat-list-option>
</mat-selection-list>
Important: The matchSize input is required to automatically size the item being dragged.
And since the css is scoped to your component, even when it's moved outside the DOM tree of your component it retains the style (assuming Emulated style encapsulation).
.movie-preview
{
line-height: 3;
padding: 0 1em;
color: hotpink;
background: white;
/* border (and hotpink color) are optional, based on your preference */
border: 1px solid #ccc;
border-radius: .5em;
}
That looks like this when dragging:
Try with ::ng-deep
::ng-deep .cdk-drag-preview .mat-list-item-content{
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
padding: 0 16px;
position: relative;
height: inherit;
}
this works for me
How to use input type button as ActionLink in MVC?
I used javascript to trigger the right action as below:
<script type="text/javascript">
function ButtonClick(Action) {
document.location(Action);
}
</script>
<input type="button" value="CLICK ME" onclick="ButtonClick('MyAction')" />
I am sure there is some better and straight way to accomplish this. Can any one help?
You can make link look like button using css:
Razor
#Html.ActionLink("Link As Button","Action",null,new {#class= "LinkButton"})
HTML
<a class="LinkButton" href="/Action">Link As Button</a>
CSS
.LinkButton {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
FIDDLE EXAMPLE
try this:
<input type="submit" value="Signup" class="btn btn-default btn-block" />
You should put this action link under a form tag.
I have a problem with draggable feature in Internet Explorer.
I have 2 columns, each of them contains a list of cards. I want to drag a card from one column to another.
Problem is when I start dragging, cards from other column are moved as well. This happens only in IE.
HTML:
<div class="card-container">
<div class="card-row">
<div column_id="1" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" >
<li story_id="2" class="card" style="position: relative;">
<div>Card1</div>
</li>
</ul>
</div>
<div column_id="2" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" class="snap">
<li story_id="1" class="card" style="position: relative;">
<div>Card2</div>
</li>
</ul>
</div>
</div>
</div>
JS:
$(".drag").find(".card").draggable({
revert: "invalid"
});
$(".card-column").droppable({
accept: ".card",
drop: function( event, ui ) {
$(this).find("ul").append("<li class=\'card ui-draggable\' story_id=\'" + ui.draggable.attr("story_id") + "\' style=\'position: relative;\'>" + $(ui.draggable).html() + "</li>");
ui.draggable.remove();
$(".drag").find(".card").draggable({
revert: "invalid"
});
}
});
CSS:
.card-container{
display: table;
}
.card-column{
display: table-cell;
min-height: 200px;
border: 1px solid #B6B6B6;
}
.card-row{
min-height: 200px;
display: table-row;
}
.card-column ul {
list-style: none outside none;
margin: 0 0px;
padding: 0px 0 0;
position: relative;
}
.card-column ul li{
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #D0D0D0;
border-radius: 3px;
margin: 5px;
}
JSFiddle
Im using jQuery UI 1.8.6
How can I prevent other cards to move?
Cheers
In CSS add float:left to .card-column class
.card-column{
display: table-cell;
float:left;/*ADD THIS*/
min-height: 200px;
border: 1px solid #B6B6B6;
}
When I click on my links, they do not go anywhere; I clicked on "about Us" , nothing. I looked at Lucas Green's answer to anc1revv, but I'm still drawing a blank. I appreciate any ideas. Also the links do not turn yellow when I hover. I know it's something minor.
Sorry, I meant turn orange when I hover.
Thank you
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/green-light.jpg" alt="Green Light Data Technologies" />
<img class="header-star-left" src="images/arrow2.jpg" alt="All Systems Go" />
<img class="header-star-rt" src="images/arrow2.jpg" alt="All Systems Go" />
<h1>Green Light Data Technologies</h1>
<h2>Keeping All Systems GO!</h2>
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
<div id="content-home">
<h1>Welcome to Green Light Data Technologies!</h1>
<p>Thank you for visiting our site. Here you will find the latest cabling products, accessories and expert advise on their use. Our employees are well trained, product knowledgeable and are pleased to assist you.
Our website is designed to be easy to navigate and easy to learn more about Green Light product lines that may be of interest to you.
We are committed to supplying excellent electronic components that will meet your needs and to the development of unique future electronic components that will open new vistas in electronics. We actively pursue the improvement of existing products, the strengthening of newly developed products.</p>
</div><!--/#content-->
</div><!--/#container-->
</body>
</html>
/* MAIN NAVIGATION
----------------------------------- */
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0;
margin: 0;
}
#nav ul {
list-style: none;
padding: 0;
margin: 205px;
margin-left: 1em;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0;
margin: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
/*color: #fff;*/
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
position: relative;
bottom: -5px;
background-color: orange;
border-bottom: 2px dotted #fff;
}
Its probably your browser's popup blocker preventing the _blank link opening a new popup. look at the top (for firefox and chrome) or bottom (for IE) for notifications to allow popup.
orange hover links are working as expected.
check this JSFiddle I added this:
body {
background-color: #999999;
}
so your menu is visible.
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?