I come to you because I have not found anything answering my questions.
I am currently doing a project in vue.js and when putting in production some elements lose their css. If someone has already had the same problem and could help me :)
(sorry for my bad english)
Some pictures so you can see what I'm talking about
This is my div in local
And this one in prod...
Related
Sorry to leave this question here, but I can't find the solution anywhere else.
On HTML Tag
When I type # on any HTML Tag, it popsup.
But, on a Vue Tags like for example or others built in components, that, doesn't show.
On Vue Tag
There's a configuration to do so?
Anybody can help?
It's on a Vue3 with Volar.
Sorry for my poor english, it's my seconded language.
We are using Vuejs in our project, but I'm trying to implement HTMX in our view and I have no clue how. I know that I probably can't use HTMX in Vuejs and I can't change our whole project to HTMX right now.
I was thinking to use v-html and generate whole HTMX there but it doesn't work because when I import import 'htmx.org'; based on HTMX doc, vue just hates it :D
Edit: While writing this question, we decided to do it as an separated project but I am curious anyway. Is is even possible? There is not much questions about HTMX yet, I didn't find anything helpful.
I am happy to answer any question for clarification.
Thanks and sorry for my potato english!
I tried to implement HTMX in our VueJs project for separated page or component and it didn't work.
Im working through an accessibility audit for one of our sites. One of the things that has came back is empty headers where we have used vue for the text content. The audit is not seeing the rendered content and is hightlighting this as an issue. Does anyone have any ideas as to a solution?
<h3 v-html="post.title.rendered"></h3>
This is seen as an empty h3
I found an link here that helps
Screen readers and Javascript
Thanks for the replies
Protractor 1.7.0 has introduced a new feature: a new locator by.deepCss which helps to find elements within a shadow DOM.
Which use cases does it cover? When would you want to reach elements in the shadow DOM?
The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.
To answer your question, here's a related question: "what information does shadow dom provide that looking at raw html does not?"
The following snippet creates a shadom dom (view via chrome or firefox):
<input type="date">
If you click on the arrow, a pop up opens with all the dates, and you can select it.
Now imagine you are building a hotel reservation app and you made a custom shadow dom date picker, where it would black out (and not allow user to select) dates when rooms are unavailable.
Looking at the raw html, you see <input type="date">, and the value/dates that a user selected. However, how would you test that the black out UI is working as intended? For that you would need to examine the shadow dom, where the pop up resides.
The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.
Doesn't seem so in this website that shows an introduction to shadow DOM. It says that:
Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression.
Shadow DOM mainly helps with separating content to avoid naming conflicts and improving your code expression, making it neater and better (I assume). I am sorry to say that I don't actually use Selenium, so here is a website with plenty more information: http://webcomponents.org/polyfills/shadow-dom/
I hope this helps you!
I wanted to use bootstrap switch without having the white space (data-text-label) between both data-on-label and data-off-label options. And I could probably sort this out but I must move on to other stuff due to dead-lines for the project i'm working on.
I would apreciate a lot if anyone knows how to achive this and shares it whith me.
I am pulling the answer out of your question and putting it here to help future visitors.
This can be accomplished with a few changes to the switch CSS
label width:0 the main child div width:200% and the options spans with width:50%.