How to get Emmet codding to get html structure from this code:
.header>.logo+.lang.+.menu+.container+.row>+.col-md-6+.col-md-6
I need to get container element outside of header element.
Use grouping or climb-up syntax
Grouping: ()
(.header>.logo+.lang.+.menu)+.container+.row>+.col-md-6+.col-md-6
Climb-up: ^
.header>.logo+.lang.+.menu^.container+.row>+.col-md-6+.col-md-6
<div class="header">
<div class="logo"></div>
<div class="lang "></div>
<div class="menu"></div>
</div>
<div class="container"></div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
See Emmet Documentation: Abbreviation Syntax
Edit: Answer updated to include climb-up syntax alternative
Related
I want to find and replace some child tags that are nested inside parent tag.
Here is my template:
<$tag$ $attribute$=$value$>
<$childTag$ $childAttr$=$childValue$ />
<$tag$/>
I apply text filtering via regex to $value$ and to $childValue$:
$value$ filter is .*sm-landing-appstore-app-1-gallery--main.*
$childValue$ filter is sm-landing-appstore-app-1-gallery__slide-img
And this is a part of an HTML document where I want to find my sm-landing-appstore-app-1-gallery__slide-img and replace it:
<div class="sm-landing-appstore-app-1-gallery__main-gallery">
<div class="sm-landing-appstore-app-1-gallery__main-gallery-frame-wr swiper-container">
<div class="sm-landing-appstore-app-1-gallery__frame sm-landing-appstore-app-1-gallery__main-gallery-frame swiper-wrapper">
<div class="sm-landing-appstore-app-1-gallery__slide sm-landing-appstore-app-1-gallery__main-gallery-slide sm-landing-appstore-app-1-gallery__main-gallery-slide--screenshot swiper-slide"
data-index="0" data-id="0">
<div id="cmp-6" class="sm-ratio sm-landing-appstore-app-1-gallery__slide-in">
<div class="sm-ratio__placeholder"></div>
<div class="sm-ratio__body">
<div class="sm-landing-appstore-app-1-gallery__slide-cv"><img
class="sm-landing-appstore-app-1-gallery__slide-img"
src="img/Fitness%20Buddy/1.jpg" alt="EasyFitness gallery 1" data-number-image="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But the syntax of my search template is incorrect.
Is finding of nested tags even possible with IntelliJ structural search?
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
I'm working on a project for Prestashop and I have the following file:
blocktopmenu.tpl
https://github.com/PrestaShop/PrestaShop/blob/master/modules/blocktopmenu/blocktopmenu.tpl
I need to know where is the end tag for "sf-contener clearfix" < / div >
Any idea?
Thks and sorry my english!
------ EDITED POST ------
i tried it, but no work for me :(((
I placed "exampleDiv" right here:
header.tpl
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
<div id="exampleDiv"></div>
</div>
but i look this result in Firebug:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="#"></a>
<div id="header_right" class="grid_6 omega">
<div id="topMenu_bg_up"></div>
<div class="sf-contener clearfix"></div>
**i wanna to play here :D**
</div>
<div id="minic_slider" class="theme-default"></div>
<div style="display:none;">
<div>
<script type="text/javascript">
<div id="exampleDiv"></div>
**but it work in this other place :(**
</div>
</div>
Here :
https://github.com/PrestaShop/PrestaShop/blob/master/themes/default/header.tpl#L84
The #header_right is closed in blocktopmenu.tpl and the topmenu is displayed under.
Edit : If you want to add content just after the topmenu, the best way is to create e module, hook it on toppage and position it just after the blocktopmenu.
I have a dijit that looks fine as far as I can tell, but it is raising Uncaught Error: Invalid template every time. I have not been able to figure out why. All variables (e.g. ${variableName} are defined in the widget correctly.
Here is the widget:
<div class="${classPrefix}-wrapper">
<div class="${classPrefix} flair" dojoAttachPoint="flairNode"></div>
<div class="${classPrefix}-count hidden" dojoAttachPoint="countWrapperNode">
<div class="count" dojoAttachPoint="countNode">0</div>
</div>
<div class="${classPrefix} ${secondaryClass} action hidden" dojoAttachPoint="secondaryClickNode" dojoAttachEvent="onclick:_onSecondaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix} ${primaryClass} action" dojoAttachPoint="primaryClickNode" dojoAttachEvent="onclick:_onPrimaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix}-message hidden" dojoAttachPoint="messageNode"></div>
</div>
<div class="${actionPromptNodeClass}" dojoAttachPoint="actionPromptMessageNode">
<span dojoAttachPoint="actionPromptMessage">${actionPromptText}</span>
<span dojoAttachPoint="actionCompletedMessage" class="hidden">${actionCompletedText</span>
</div>
Found the answer to my question. It turns out that you can only have one root node in a Dijit. I missed this in the docs, but it is at the bottom of this tutorial:
Common Pitfalls
Be sure to only have one root node in your template
Don’t start or end your template with a comment because that means you technically have two nodes
Avoid a trailing </div> at the end of your template
There may be only one root element in the template. Wrap your template into <div></div> and it should work.
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html