How I would render a selectize instance with selectize-control wrap before the select element?
Originally it rends like this
<select>...</select>
<div class="selectize-control multi">...</div>
How I would do this
<div class="selectize-control multi">...</div>
<select>...</select>
The plugin url is http://selectize.github.io/selectize.js/
Inside selectize.js, search for this line
$input.attr('tabindex', -1).hide().after(self.$wrapper);
replace it with
$input.attr('tabindex', -1).hide().before(self.$wrapper);
But I think you should search for a better solution.
Related
for your understanding i attached w3school screenshot.
enter image description here
if u have ever visited w3school website u will understand my requirement easily.
i want to create these html sidebar dynamic from my admin dashboard. first i will create one sidebar title name then insert content according to title name and so on..... for best understanding you can assume that i want to create w3school clone dynamic from where i can dynamic create sidebar and content. i read about react router dom and many more but not able to create like this.
You can use react-router for navigation and then render according to the route
https://codesandbox.io/s/c2zs4
here is the example I found, it used react-router for navigation and render components according to the route.
add in _app.js file
you can put a header here
<div className="flex">
<div className="W-2/6>
<Sidebar/>
</div>
<div className="w-4/6">
page component here
</div>
</div>
and footer here
I used tailwind CSS
I have this html and want to select only the div with class 'image-container landscape'.
<div class="image-container landscape">
...
</div>
...
<div class="image-container portrait">
...
</div>
Using $(element).find('.image-container') selects either one of the div, that comes first. But I only want the one with 'landscape'. I tried using $(element).find('.image-container landscape') but it doesn't work, maybe because it assumes landscape is a tag. How do I do this?
Yes, it would assume landscape was a tag.
You want either:
[class="image-container landscape"]
or
.image-container.landscape
This is just CSS3 for the record, you can probably read the full specs in less than an hour.
I am using the emmet.vim plugin.
How do you write emmet shorthand to account for attributes with no values?
This is what I write:
div.contain-to-grid.sticky>nav.topbar[data-topbar]
This is what I want to happen:
<div class="contain-to-grid sticky">
<nav class="topbar" data-topbar></nav>
</div>
This is what I get:
<div class="contain-to-grid sticky">
<nav class="topbar" data-topbar=""></nav>
</div>
Instead of creating an attribute without a value:
data-topbar
it is creating an empty value:
data-topbar=""
Is there a work around for this? If not then I can live with it. It would be nice to know if it can be done. Thanks
The behaviour of Emmet-vim was changed to be as expected from documentation:
You don’t have to specify attribute values: td[colspan title] will
produce <td colspan="" title=""> with tabstops inside each empty
attribute (if your editor supports them).
So no. You can follow this request here: Attributes without values not being expanded.
Possible crude workaround could be to change the line 220 in autoload/emmet/lang/html.vim from
let current.attr[atts] = ''
to
let current.attr[atts] = function('emmet#types#true')
I just copy the comment by #Alexander Nied to make it more noticeable, which says
While the documentation does not seem to reflect it, this closed issue indicates that support for boolean attributes has been added to Emmet with the syntax of div[my-attribute.], which should expand to This worked for me in Sublime Text
this work for me too, in Intellij idea
As of today (Feb 17, 2023), you can expand foo[bar.] into <foo bar></foo>
So,
div.contain-to-grid.sticky>nav.topbar[data-topbar.]
will be expanded to
<div class="contain-to-grid sticky">
<nav class="topbar" data-topbar></nav>
</div>
I am new to using Jade -- and it's awesome so far.
But one thing that I need to happen is an element with 'itemscope' property:
<header itemscope itemtype="http://schema.org/WPHeader">
My Jade notation is:
header(itemscope, itemtype='http://schema.org/WPHeader')
But result is:
<header itemscope="itemscope" itemtype="http://schema.org/WPHeader">
How can I make sure that I get the right result -- itemscope instead of itemscope="itemscope"?
Sometimes it doesn't work quite right -- like with contentEditable Jade tries to detect html5 doctypes and then does <header itemscope itemtype="http://schema.org/WPHeader"></header> if it finds it. The problem is that if you have templates that you are inserting in the page, it can't tell that it's html5.
What you can do is force html5 compilation by passing in {doctype: '5'} to the options -- did this for require-jade: https://github.com/ibash/require-jade/commit/754cba2dce7574b400f75a05172ec97465a8a5eb
I had the same problem using angular ng-include directive. It gets ng-include="ng-include" and then the include doesn'nt work.
What it works for me is to use an empty string as a value, i.e. ng-include="".
Here is answer from jade developers: you should use
doctype html
in the template.
https://github.com/pugjs/jade/issues/370
I just tried it in a Express.js/Jade project and the result i get is:
<header itemscope itemtype="http://schema.org/WPHeader"></header>
I also tried it in bash and then I get the same result as you.
I'd go with the following suggestion or create an issue on Github.
itemscope="itemscope" will work just as well as just itemscope. It looks like that's the default behavior of Jade. I'd just go with it.
I had the same problem, and the easiest solution in my case was adding doctype 5 at the top of my jade document. That apparently allows Jade to use attributes without a value.
ibash put me on the right track with his answer, so thanks for that
The links are wrapped in a span:
<span class='editbio'>
Edit
</span>
...
<span class='addbio'>
Edit
</span>
How about something like
browser.span(:class, "editbio").link(:text, "Edit")
to get the first link
vs
browser.span(:class, "addbio").link(:text, "Edit")
for the second link?
You can get a list of elements and tags you can use at Watir: Methods supported by Element.
You can try to use multiple arguments with the Watir's link method:
http://wiki.openqa.org/display/WTR/Multiple+Attributes
For your example, the accepted answer works fine. But if both of your links were in a single span and had the same display text, like so:
<span class='edit'>
Edit
Edit
</span>
You could use something like this for the second link (zero-based index):
browser.span(:class, 'edit').link(text: 'Edit', index: 1)