WebStorm autocomplete html code - webstorm

I'm searching for shortcut in WebStorm for auto completing my html code. So in my case if I write code like .row and press something it should automatically write <div class="row"></div>.

Such "transformation" (abbreviation expansion) called Emmet .. and by default it uses Tab key.
But it can also be Enter or Space .. or even custom key of your choice -- you can change it at Settings/Preferences | Editor | Emmet
P.S.
For big chunks of code -- have a look at Live Templates (Code Snippets).

You can use the Tab key to auto-complete the code. For example:
Write .row#row and press Tab key will make <div class="row" id="row"></div>.
I think this would help.

Related

How to remove text shadow on JSX tags

I want to remove this shadow:
So that it looks like a regular HTML:
How do I do that?
Normally (in HTML/XML file) that would be Tag style. And XML styles may be taking over HTML here (as an underlying language in IDE's styling hierarchy perhaps).
I'm not sure if this will work here but try this anyway (can be used in other scenarios):
Select some code (e.g. a whole tag) in such a file.
Invoke Help | Find Action... (or Search Everywhere and focus on "Actions" tab)
Locate Jump to Colors and Fonts entry there and invoke it.
See if a popup will have the related style listed (does not seem to list it here in PhpStorm using HTML+PHP file in my quick test -- only lists PHP styles).
P.S. It's not a "text shadow" but a background color.

How to make input box work in the result page

I am learning Django and i learn on making small project for lEARNING PURPOSE.
I learned how work with input and use as variable. Now i want to use search box with the same principle.
Please see the link of input based :
https://stackoverflow.com/questions/58813945/changing-form-to-search-box
index.html is the input after inserting info and clicking ok it directs to index2.html which shows the results
What I need to change besides POST to GET to make it work as it works with input function? do i need to change form, models?
My concern also i want to inset search bar in the navigation in index2.html where user can make search from the result page. This is my index2.html page. I tried to put {{form.as_p }} inside the form function but it does not work. I want after putting infro in search box and clicking search glyphicon (which does not work) will stay on the same page index2.html
I searched the internet and read stackoverflow other examples, but they use complicated version, i need a simple one :
1. i want to have search box on index.html page so it does not show me the name in front of input box and
2. i want search box in the index2.html page keep implementing the same function as index.html so a user do not have to go the initial page to search new data.
Any help or tips would be highly appreciated.
Since you're using bootstrap4 I would recommend to use its template tags and form field customization options.
Example:
{% bootstrap_field form.login show_label=False addon_before='<span class="fa fa-user"></span>' %}
Not: this example uses Font Aweseome for icons.
Also you're not using the real power of Django Bootstrap4, see Quickstart. You can always override the version of Booststrap or the CDN used in your settings.py if needed: Settings.

Soft wrap by Markdown only

I'd like to have soft wraps in the WebStorm editor only by Markdown files. According to Word wrapping in phpstorm this can be achieved only with Menu | View | Active Editor | Use Soft Wraps. I really don't want to have soft wraps by coding, but I don't want to use the menu every time I open an .md file.
Isn't there a way to assign this behavior for example to language or to file type?
It's 2019, and users of JetBrains apps now have automatic soft-wraps for Markdown documents - rejoice! 🎉🎊🥳
Alas it is not enabled by default, so you'll need to visit your preferences and check a box: On WebStorm 2019.2 at least, navigate to Editor > General > Soft Wraps and click your way to Markdown-soft-wrap bliss.
I found an acceptable solution to do this:
Go to "Settings" -> "Keymap".
Look for "Main menu" -> "View" -> "Active Editor".
Assign a keyboard shortcup to "Use Soft Wraps" (for instance: Ctrl + Alt + w).
Now when you are editing a file, use this shortcut and it will enable the soft wraps only for this file.
You can configure this in .editorconfig and it will work in any JetBrains IDE that supports .editorconfig (hopefully all of them).
[*.md]
ij_any_wrap_long_lines = true

Sphinx Readthedocs theme Font-awesome integration

I know this may be a very silly question, but I've not managed to find anything online about a potential solution.
I am using Sphinx 1.4 and the sphinx_rtd_theme to generate some documentation for my Django project. I've been trying to find a way to use font-awesome icons in the .rst files but have found no way to do it. I've had a look at the sphinx_rtd_theme source files and the fa-* icons are included in the theme.css file. However, I'm unaware of a way actually to have them included.
Is it a directive, interpreted text or anything similar? I've tried icon, fonticon and fa as either of the above and none worked.
Any help would be appreciated.
I know I can potentially use raw HTML, but I'd like to avoid that if at all possible.
You can use Sphinx's rst-class directive, as follows:
.. rst-class:: fa fa-fontawesome
the font awsome flag will be attached to this paragraph
rst-class will set the class attribute for the next element as specified.
The following code renders only the icon:
.. rst-class:: fa fa-font-awesome
|
Of course, you can also use custom classes to further style the element.
You can also use https://sphinx-panels.readthedocs.io/en/latest/#inline-icons:
:fa:`bars`
:fa:`spinner,text-white bg-primary fa-2x,style=fa`
I am just learning Sphinx and had the same question, but using raw HTML is fine for my case. Maybe this solution will be helpful to someone out there...
In the conf.py file, add a link to your Fontawesome Kit Code URL
html_js_files = [
'https://kit.fontawesome.com/##########.js',
]
Then, use fontawesome icons in Sphinx with the raw HTML directive
.. |fa-fort-awesome| raw:: html
<i class="fab fa-fort-awesome"></i>
Here is some text |fa-fort-awesome| with the icon in the middle.
Here is how it renders as HTML...
In order to make the icons available on HTML and Latex download FontAwesome Web Package from https://fontawesome.com/download, include font-awesome/svgs/solid into your project _static folder and make use of image directives like bellow:
The |fa-bars| function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
.. |fa-bars| image:: _static/font-awesome/svgs/solid/bars.svg
:width: 20px
:alt: hamburguer button
Results:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
The <i class="fa fa-bars"></i> function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.

How to select particular element in Selenium with IE Webdriver

In a web page I am trying to test, I need to click on the element defined by the following:
<span id="mx45" class="text powerwhite goto " title="Go To ALT+G " style="display: block; cursor: pointer;" accesskey="G" mxevent="click" targetid="mx45" ev="goto" tabindex="0" ctype="label" align="middle" clicked="true">
I can't use the id because when the server restarts, the id changes. I tried getting the XPATH from Firebug (as I have done for lots of other elements) but that does not get found. All suggestions gratefully received.
EDIT
Thanks to the answers I am now able to select the element, but this has presented a new problem. The element is a link which pops up a menu, but if I try to get Selenium to click on the link, it just flashes (like Selenium is finding it, but can't click on it). If I click the link, my test continues, but I am struggling a bit here to make Selenium actually click the element.
I don't know about the structure of your html,
but given, the title is unique, you could do somthing like this:
driver.find_element_by_xpath("//span[#title='Go To ALT+G ']").click()
you could also go for "tabindex" or "class", if your html-structure allows it.
someParentElement.find_element_by_xpath("//span[#tabindex='0']").click()
someParentElement.find_element_by_xpath("//span[#class='text powerwhite goto ']").click()
Which would for example be the case if you can find a parent-element below which these attributes are unique
Assuming the attributes I am referencing are static I would use CSS selectors referencing attributes like drkthng used
$$(span.text[title='Go To ALT+G ']").
You can also use a static neighboring element as an achor and navigate from it.