by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 07:29
    mshabarov review_requested #902
  • 07:18
    mshabarov synchronize #902
  • 07:18

    mshabarov on 386-improve-undefined-size-scrolling

    Undefined size tests added (compare)

  • 06:08
    mshabarov commented #902
  • Sep 17 15:05

    tomivirkki on p3-research

    Bugfix (compare)

  • Sep 17 13:31
    mshabarov synchronize #902
  • Sep 17 13:31

    mshabarov on 386-improve-undefined-size-scrolling

    Reset position to 0 after the s… (compare)

  • Sep 17 10:53
    tomivirkki commented #902
  • Sep 17 10:22
    web-padawan commented #902
  • Sep 17 10:19
    web-padawan review_requested #902
  • Sep 17 10:02
    mshabarov review_requested #902
  • Sep 17 09:43
    mshabarov synchronize #902
  • Sep 17 09:43

    mshabarov on 386-improve-undefined-size-scrolling

    No need to restore the scrollin… (compare)

  • Sep 17 07:45
    web-padawan synchronize #733
  • Sep 17 07:45

    web-padawan on p3-research

    Replace dom-module with registe… (compare)

  • Sep 17 07:41
    tomivirkki synchronize #1791
  • Sep 17 07:41

    tomivirkki on sticky-scrolling

    Workaround an iOS 10 bug (compare)

  • Sep 17 07:10
    tomivirkki synchronize #1791
  • Sep 17 07:10

    tomivirkki on sticky-scrolling

    Use -webkit-sticky for older iO… (compare)

  • Sep 16 14:02
    mshabarov synchronize #902
frangomezvenegas
@FranGomezVenegas
@andersforsell Exactly! I created both builds and "es6-unbundled" still issued but "uncompiled-unbundled" works fine. Thanks a lot!
Mateusz
@denzeloff
hello, is there any video player component, which i can use to watch video from my raspberry pi in real time?
Serhii Kulykov
@web-padawan
We do not have any video player components and generally recommend to use<video> HTML element where possible.
Manoj2749
@Manoj2749
Hello, i'm using web-components in my project, i have added polyfills of web-components in our application,Its working fine in chrome,Firefox,IE,IE edge too,
But i have an problem, We are using ng-select dropdown to select values...In IE edge i am not able to select the drop down selection, its not working properly ,can someone help me on that
Kari Söderholm
@Haprog
ng-select is an Angular component right? Afaik it's not implemented as a web component so I'm not sure why you're asking here. Personally I don't have any Angular experience.
Manoj2749
@Manoj2749
App1(main app) App2(charts)..With the reference of Vaadin blog, i implemented web components its working fine , its not issue with ng-select. working in other components of application, i added polyfills in App1(main app) head tag, after adding polyfills selection of dropdown not behaving properly, if i'm removing polyfills its working fine...can someone help me on that
Mark Garrett
@moderndeveloperllc
@web-padawan With the new LitElement vaadin-app-layout, what is the procedure for registering styles for that element? I was using registerStyles('vaadin-app-layout', css...); and importing that into the element I was using vaadin-app-layout, but that doesn't seem to work anymore.
Mark Garrett
@moderndeveloperllc
@web-padawan It's difficult to debug the issue because in lit-elements there is no longer a <style> element in the shadowDOM to Inspect in the browser, nor does a dom-module get inserted anymore.
Serhii Kulykov
@web-padawan
It should work. For debugging, it's easier to use Firefox or add the following to HTML page: delete Document.prototype.adoptedStyleSheets (before any other scripts)
Please create an issue and I will investigate.
souravtyson
@souravtyson
i am working on polymer web-component. i have this page which gets open when i click on the button, the is opening but the focus of the page is at the bottom. i want to show the top view of the page but its not showing. Any idea how can i do it
Mark Garrett
@moderndeveloperllc
@web-padawan Took me almost all day, but I think I found the issue: vaadin/vaadin-app-layout#144
Basically, the Vaadin themes can wind up being loaded and inserted as styles after user custom styles since they have no moduleId.
sahilshah50
@sahilshah50

@souravtyson , I believe you are using vaadin-router for navigation. If you want a generic solution for all pages, you can use window.scrollTo(0, 0); in the "vaadin-router-location-changed" event. Check discussion on vaadin/vaadin-router#43

If you need more granular control, you can use onAfterEnter event on the webcomponents for which you wish to restore scroll position.
onAfterEnter(location, commands, router) {
//Restore scroll position in case of navigating back, else scroll to top
let y = 0;
if (history.state && history.state["scrollY"]) y = history.state["scrollY"];
setTimeout(function () { window.scrollTo(0, y); }, 1);
}

Mark Garrett
@moderndeveloperllc
Very strange issue going on with printing. I'm using vaadin-app-layout and vaadin-grid in a set of LitElements. When I go to print, it only prints what's available on the screen - not the multiple pages that the grid might take. Thoughts?
Tomi Virkki
@tomivirkki
@moderndeveloperllc you mentioned LitElement. Does the issue not occur without Lit? I'm not sure if I fully understand the issue; a live example would help. Also note that the grid uses virtual scrolling under the hood (iron-list currently) so the DOM will only include a subset of the items at a time if there are lots of them.
chisholmd
@chisholmd
Hi, I am using the vaadin-router and trying to use the onBeforeLeave event. The only code example I can find uses " implements BeforeLeaveObserver " ...but it looks like "implements" is only available via TypeScript. Can anyone tell me if TS is required in order to use this feature? or can point to a code example in plain ES6. Thanks for any help. For now I am going to assume that I can't use this feature of the vaadin-router.
Mark Garrett
@moderndeveloperllc
@tomivirkki I wish I could figure out a better way of describing what is going on. I put together a glitch.me, but the issue isn't occurring with it! I'm thinking this might be a packager (webpack) issue. I'm using height-by-rows, so all items are in the DOM. Troubleshooting this is very difficult as the print subsystem for browsers is pretty much a blackbox. JS breakpoints don't work. I'm looking at the Performance timeline now to see if there is something obviously wrong. FYI, the glitch I'm working with: https://glitch.com/edit/#!/level-perfume-rb4e46pxq?path=grid-element.js:1:0
sahilshah50
@sahilshah50
@chisholmd, you can find basic usage examples for Lifecycle events at following links:
https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-lifecycle-callbacks-demos
https://github.com/vaadin/vaadin-router/wiki/Transition-Rules
And full documentation at: https://vaadin.github.io/vaadin-router/vaadin-router/#/classes/WebComponentInterface#method-onBeforeLeave
TS is not a prerequisite for using vaadin-router, and you should be able to use that callback in plain ES6.
Mark Garrett
@moderndeveloperllc
@tomivirkki @web-padawan Found the issue. CSS of course. I was following the instructions to use "content scrolling" and set html and body to height: 100%; otherwise my drawer isn't big enough on many pages. Unfortunately, this height doesn't work very well when printing. I'm guessing that it has to do with the vaadin-grid being in the shadowRoot of an enclosing component.

I fixed by also having

@media print {
    html, body {
        height: auto;
    }
}

in my CSS.

Mark Garrett
@moderndeveloperllc
Issue submitted for documentation: vaadin/vaadin-app-layout#148
Mark Garrett
@moderndeveloperllc
Issue with vaadin-development-mode-detector. When using webpack it is being included with other Vaadin elements. Unfortunately, it trips my CSP protections and reporting. The script executes because I'm not in dev mode, but I get a report each time the script loads. Anyone know a way to not have that script loaded?
Mark Garrett
@moderndeveloperllc
Sorry, the offending code does NOT execute, but browsers still see the Function() call and sends a CSP report to my reporting URL
Tim Sweet
@timothyswt_twitter

hey guys I'm impressed with the router project. I am hoping to use it in conjunction with the web components my team and I are developing using the loader i wrote a while back. https://github.com/orneryd/web-components

It has no runtime dependencies and supports sass. It lets you write es6 template literal syntax inside of html files and pass context for events into the exported function.

Tim Sweet
@timothyswt_twitter
it's essentially vanilla webcomponents with the ability to separate the html, css/scss, and js from each other while also allowing you to use es6 literal syntax so you don't have to learn anything other than what the browser supports out of the box. The event binding is the biggest feature as it allows you to put onclick=${this.myHandler} (or any on* events including dispatches of CustomEvents) onto any elements in the html and as long as it exists on the object passed to the template function (check the readme), it will be wired up for you automatically.
chisholmd
@chisholmd
I just read https://github.com/vaadin/vaadin-themable-mixin#stylable-shadow-parts
and I am more confused then ever. Is there a really simple example somewhere of how to style the selected value in a vaadin-select. Its kinda driving me craxy
chisholmd
@chisholmd
I have my-element and inside its template I have a vaadin-select that works fine, except that the selected value that is displayed is black. So I added this to the host: section of my-element's style block:
:host {
[part="input-field"] {
color: #fff;
}
}
..but the selected value that is displayed remains black. Did I read the instructions wrong?
chisholmd
@chisholmd

Right so I drilled into...
\bower_components\vaadin-select\theme\lumo\vaadin-select-styles.html
scrolled down to the <dom-module id="lumo-select-text-field">
and found [part="input-field"] {} and added color:#fff.

Finally I have white text!! So what is the proper way of doing that?

Kari Söderholm
@Haprog
@chisholmd Have you looked at the vaadin-select styling demos here https://cdn.vaadin.com/vaadin-select/2.1.7/demo/#select-styling-demos ?
Kari Söderholm
@Haprog

You need to create a style module like this

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

This will affect all vaadin-selects on the page. And note that style modules need to be loaded before the component definition itself (vaadin-select in this case) is loaded or it won't have an effect.

If you only want it to affect specific vaadin-select elements only then do this instead:

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      :host([theme~="custom-select"]) [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

And then you need to give that select a theme attribute like <vaadin-select theme="custom-select"></vaadin-select>.

Mark Garrett
@moderndeveloperllc
@web-padawan Just an FYI, new alphas are working well for me so far. The module IDs set things in the right order for themes and I'm not seeing any regressions so far.
MdV303
@MdV303

Hi all, I have a question about styling the vaadin-upload component. I am able to apply custom styling to
vaadin-upload::part(upload-button)
and
vaadin-upload::part(file-list)

However, I am struggling to find the proper syntax to set styling on elements deeper in the component's hierarchy, in particular the status text part, called "status". None of the following attempts work:

        vaadin-upload::part(status) {
            color: #009acd;
        }

        :host() [part="status"] {
            color: #009acd;
        }

        #status {
            color: #009acd;
        }

        vaadin-upload-file::part(status) {
            color: #009acd;
        }

What am I missing here? Why does the syntax I use for "upload-button" and "file-list" have no effect on "status"?
Any help would be appreciated :-)

Martijn

suns
@sashafirsov
Hi all, is there any samples of declarative use of <vaadin-menu-bar>?
(Declarative means with tags and no JS)
suns
@sashafirsov
Same question about <vaadin-combo-box> - are there declarative use samples ?
Kari Söderholm
@Haprog

@MdV303 When you want to style the internal parts of the components (which are inside shadow DOM) you need to declare the styles in special style modules so they get injected to the components you're targeting. You should probably read the docs at https://github.com/vaadin/vaadin-themable-mixin#readme to understand how it works. Most Vaadin components have some useful CSS styling examples at "Styling" tab in the demos of the component so you can see the correct HTML+CSS syntax to define specific styles at least, but vaadin-upload doesn't seem to have styling examples with CSS.

Basically for styling the part you want you need something like:

<dom-module id="custom-upload-file-style" theme-for="vaadin-upload-file">
  <template>
    <style>
      [part="status"] {
        ...
      }
    </style>
  </template>
</dom-module>
Kari Söderholm
@Haprog

@sashafirsov Unfortunately <vaadin-menu-bar> doesn't support a declarative API for defining the contents atm. vaadin/vaadin-menu-bar#81

Basically the same for <vaadin-combo-box> though you can provide an "item template" declaratively (there's an example in API docs https://cdn.vaadin.com/vaadin-combo-box/5.0.11/#/elements/vaadin-combo-box). I didn't see an existing issue about providing a declarative API for combo box.

In both cases you can provide items property as an HTML attribute (JSON string) but it isn't pretty.

Example from above link:
<vaadin-combo-box items='[{"label": "Hydrogen", "value": "H"}]'>
  <template>
    [[index]]: [[item.label]] <b>[[item.value]</b>
  </template>
</vaadin-combo-box>
MdV303
@MdV303
@Haprog Thanks for your response. Indeed, I can't find styling examples for vaadin-upload anywhere... Tomorrow I'll be working on that particular project again so I can try your suggestion. Will let you know how it turns out.
suns
@sashafirsov
@Haprog I found that vaadin-combo-box sample in webcomponents.org . Which was not easy to dig out. Is there a good way to contribute into documentation? Declarative use is a level of magnitude easier to comprehend and replicate. Especially for learning, demo, or evaluation. Accounting that web components have more attraction from gitter community, IMO vaadin would benefit from docs upgrade.
Kari Söderholm
@Haprog

@sashafirsov You can find the component docs and demos from https://vaadin.com/components/ or directly from GitHub (e.g. via https://github.com/vaadin/vaadin#readme). Each Vaadin web component repository has release notes in GitHub "Releases" page with links to "Live Demo" (code examples) and "API Documentation" (this is the link I pasted above) for each release. For example here for combo box https://github.com/vaadin/vaadin-combo-box/releases

The same information can basically be found from here https://vaadin.com/components/vaadin-combo-box (just make sure to select "HTML" version from the left unless you want to see the Java API). Then use the "Examples" and "API" tabs. Here's a more direct link which shows the above code snippet https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement (though the info at vaadin.com is not immediately updated after new component releases so it might be slightly outdated in some cases. If you need to check the web component docs for a specific version or want to make sure you're looking at the latest version of the demos, check the links in the latest GitHub releases)

The best way to contribute to our component documentation atm. is by opening issues or commenting on issues at the related component's GitHub repository. You can also contribute pull requests but it would be better to first check with the team (e.g. via discussion in issue) what is a good approach or what kind of pull request would be ok depending on issue (just to avoid wasted effort in case we can't accept the pull request without major changes).

We're working on a new documentation site to replace https://vaadin.com/docs/ (which currently focuses mainly on the Java framework side). The new docs should better integrate all our documentation in one place and should also have embedded code examples and demos of our components (both Java and HTML/JS examples). It's still a work in progress though but the first version of it might be coming out in some months from now.

suns
@sashafirsov
@Haprog , just an idea for docs, when creating the page, making it "alive" is quite beneficial. Meaning having ranked Q&A and ability to ask question. Implementation could go over git bug+tags, disqus or even wiki. Should not be difficult to implement as web component :)
PHP is a good sample of alive API docs
Kari Söderholm
@Haprog
@sashafirsov We already have commenting currently at the end of all pages at vaadin.com/docs
And there's "Edit this page" button at the top right of most content pages which links to correct file in GitHub (since those docs are currently spread across several repositories depending on which section of the docs you're looking at).
suns
@sashafirsov
@Haprog , there is no point in generic docs as far as I see. The questions raised on level of component or module
Kari Söderholm
@Haprog
As I said, those component docs will be integrated there, so they would also have the commenting as far as I understand.
Also with live examples.
suns
@sashafirsov
(Y)
Kari Söderholm
@Haprog
Not sure though if the commenting has been thought about yet in the current prototype of the new docs. Thanks for mentioning it. I'll ask has it been already considered how it will work in the new version.