Hi Alejandro,
is there a way to change using @media css class or something else the vaadin-tabs orientation?
Because I need to be vertical on desktop view, but horizontal when it is on mobile view:
@media (min-width: 600px) {
vaadin-tab {
font-size: var(--lumo-font-size-m);
padding-left: 1em;
padding-right: 1em;
something like it --> **orientation: horizontal**;
}
I’m trying to understand how to have the default horizontal bottom menu on mobile view.
Somebody can help me to understand it?
Hi Alejandro,
I don’t know why I cannot see your response here that arrived through Vaadin Forum notification email.
I will post it now:
You could try with something like:
@media (min-width: 600px) {
vaadin-tabs {
content:orientation("horizontal");
}
}
You will have to add some more rules to change the flex-direction and other stuff at least in the storefront-view.html file.
Again, this could help as a starting point for your experiments ;) And please share your findings and code if you manage to implement it :)
I tried it on my code but the menu is always vertical as you can see on mobile.png.
Changing the orientation=“vertical” to “orizontal” the menu can be visible well.
Have you, or somebody else, any suggestion for me?
Two post ago I attached my html and the screenshot to view my result
Good! Best place would be [GitHub]
(https://github.com). I’m guessing you are not familiar with Git or GitHub. Create an account if don’t have one. Install Git, add a .gitignore file like [this]
(https://github.com/alejandro-du/vaadin-microservices-demo/blob/master/.gitignore) to the root directory of your project, run git commit -am "Initial commit". Create a new repository in GitHub and follow the instructions to push the changes. Once you have the repo published, please share its URL here
Gianluka, unfortunatelly the license for Backery doesn’t allow to publish this.
Commercial Vaadin Template License version 1
>>>2.2 Licensee shall not, unless expressly provided in Agreement or in the applicable legislation,
…
2.2.2 grant sub-licenses to Licensed Template or assign its rights or obligations under this Agreement to a third party;
2.2.3 distribute the Licensed Template as-is or any derivatives or parts of it for the purpose of them being used as source code examples or basis for other software applications.
I’d suggest to remove the repo or make it private. In any case, the snippets of code and ideas shared here should help other developers to accomplish the same by themseves. Thanks again, and sorry for the hassle