I am trying to use polymer project in a website but I am stuck and cannot find help on the documentation.
How do I use the click of a paper-fab element? I have seen on another stackoverflow post the use of the property on-tap= . I have seen the docs and the code and could not find any place that says this property exists.
Should I add a event handler? Is this how polymer works?
My code:
<!-- `keepCondensedHeader` makes the condensed header to not scroll away -->
<core-scroll-header-panel condenses keepCondensedHeader condensedHeaderHeight="80">
<core-toolbar>
<div flex></div>
<core-icon-button icon="thumb-up"></core-icon-button>
<paper-fab icon="account-circle" ></paper-fab>
<div class="bottom indent bottom-text" self-end>
<div>ME AVISE</div>
<div class="subtitle">Fique informado e economize</div>
</div>
</core-toolbar>
<div class="content">
<lorem-ipsum paragraphs="100"></lorem-ipsum>
</div>
</core-scroll-header-panel>
If your posted code is inside another Polymer element you can add on-tap={{yourHandlerMethod}} to the paper-fab element. If you're outside Polymer, then yes, you can just el.addEventListener('tap', function() { ... }).
See here for the available events.
Related
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion: