In my application,I use Polymer.The application is made up with the left part and the right part. there is a button in the right part,when the button is clicked,the paper-dialog will appear on the right part.But I want it on in the whole page.How do I do?
the code is blow...
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<paper-dialog id="allActAddModal" style="width:80%;max-height:90%;margin-top:-2.5%" with-backdrop>
<act-create-all id="actAdd" on-save-ok="handleSaveOkTapped">
</act-create-all>
</paper-dialog>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red" on-click="handleAddAct">
<i class="large mdi-content-add"></i>
</a>
</div>
handleAddAct: function(event) {
this.$.allActAddModal.toggle();
}
In Polymer neon-animataion exist demo when grid transform to half page. You can use this example to resolve your task.
Foe help you in bower write next
"neon-elements": "PolymerElements/neon-elements#master",
"web-animations-js": "web-animations/web-animations-js#2.0.0"
And in bower_components/neon-animation/demo/grid you can find what you need.
P.S
"web-animations-js": "web-animations/web-animations-js#2.0.0" need to resolve bug in Google Chrome when animation don't work
Related
According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white py-5 px-5">
<h3 class="title mb-6">
Hi mom
</h3>
</div>
</div>
And here is what my site looks like on page load:
Does anyone know what code I need to add to get the regular modal behavior?
In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
I want to have a "Help Icon" button appear in the header bar of every nav-view in an Ionic project. To do that I included the following in my index.html page:
<ion-nav-view>
<ion-header-bar>
<div class="row">
<div class="col col-10 col-offset-90">
<div class="buttons">
<button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
</div>
</div>
</div>
</ion-header-bar>
</ion-nav-view>
The help button I want appears in every view as expected, but is not clickable. I'm guessing it has to do something with the layering of itself within the ion-nav-view?
Things I've tried:
Wrapping the button in an anchor
Removing the row and col placement
Note: I do have ion-header-bars in other views as well so I can show page titles. Would this affect the button at all? The button still appears but is not interactive anywhere.
Any help/comments as to why the button is not clickable is greatly appreciated.
EDIT:
So I have narrowed down my issue after more testing. The problem is with the following code in my index.html file:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
It seems as though this nav-bar overlaps the header bar. And this code is essential because of the "Back Button" implementation. Removing this code block returns the functionality of the Help Icon Button.
I figured out what I was doing wrong. ion-header-bar should not be used after the ion-nav-bar. Doing so caused it to be overlapped and not be interactive. Adding the button to the ion-nav-bar itself solved this issue. The following code works perfectly and displays the button on all views:
<ion-nav-bar>
<ion-nav-back-button>
<i class="icon ion-ios-arrow-left"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
I use bootstrap 3.3.6, ui-bootstrap 1.2.2 and I try to use collapse.
The header has to be an image. This is my code
<div id="isOpen" >
<img data-toggle="collapse" data-target="#readThis" src="./images/hello.jpg" />
<div id="readThis" > Get more info</div>
</div>
The readThis div appears opened and when I click the image to close it, it starts to close, and then re-opens.
After that works fine.
How do I fix this? Is there another bootstarp module that will work with images? I try to fix this all day, please help.
Thanks
try by putting data-toggle="collapse" data-target="#readThis" on <a> tag and put image inside it
<a href="#readThis" data-toggle="collapse">
<img src="./images/hello.jpg" />
</a>
I am using Twitter Bootstrap to create a website.
One of the pages in this website, presents a list of items.
In each item box, there is a little x to the right, which the user should be able to click to remove the item from the list. Also, clicking in the general area of a list item links to that items unique page.
Please see the JSFiddle I prepared:
JSFiddle Link
The problem is that I can't seem to put a link on the x. If I try surrounding the x with
....
the layout falls apart, as you can see here.
Since I'm using Bootstrap, I'm stuck with using their lists which are essentially composed of links (i.e. <a> tags). Despite this, is there any way I can include links like my x inside them?
I've tried using Jquery to create a listener on specifically the x but it still doesn't work (clicking the x takes you to the link of the item).
Please help!
You can add onclick event handler and prevent the default onclick event which is causing the page to be redirected. Try this, I have added an id to your second 'X' button.
$('#linkTo').click(function(event){
event.preventDefault();
alert('hello');
});
DEMO
I guess this is what you want.
check the demo, is that are you looking for
FIDDLE DEMO
$(function(){
$('.glyphicon-remove').on('click',function(){
return false;
})
})
you can use relative wrapper + absolute link for close button as follow:
<div class='wrap'>
<a href="/proj/item/1" class="list-group-item">
<img class="" style="float: left; padding-right: 20px;" src="http://www.clinicalflow.com/skins/common/icons/icon-check.gif" />
<h4 class="list-group-item-heading">item 1</h4>
<p class="list-group-item-text">Avail. since: 01/01/01</p>
</a>
<a hrerf='#' onclick="alert('assign delete link in href');" class="glyphicon glyphicon-remove"></a>
</div>
<style>
.wrap{
position:relative;
}
.glyphicon{
position:absolute;
right: 50px; top: 30px;
width: 10px; height:10px;
cursor:pointer;
}
</style>
js fiddle sample: http://jsfiddle.net/52VtD/8026/