<div tal:define="number python: 1">
<tal:block repeat="item s_items">
<div tal:define="number python: number + 1">
<div tal:content="python: number">none</div>
</div>
</tal:block>
</div>
Hi, always show 2.
but I would like to show 2 3 4 5 ...
How to do?
Thanks
Sorry I'm a bit late ;-)
Wouldn't this be better solved with repeat variables?
<tal:loop repeat="item s_items">
<div tal:content="repeat/item/number">1</div>
</tal:loop>
("loop" instead of "block" is just a matter of taste ...)
The name after "repeat" is the name of your iterator variable "item"; "number" starts with 1, "index" starts with 0 (there are more).
sorry for the delay, you could do something like.
<div tal:define="global number python: 1">
<tal:block repeat="item s_items">
<div tal:define="global number python: number + 1">
<div tal:content="python: number">none</div>
</div>
</tal:block>
</div>
Related
Good afternoon
Help me how to make a banner appear every 3-4 elements.
Here's a suggestion:
// elements is [1,2]
<div v-for="(e, i) in elements" :key="i">
<div></div>
<div></div>
<div></div>
<Banner></Banner>
<div>
Or you could do some conditional rendering based on the index so:
// elements is [1,2,3,4,5,6,7,8]
<div v-for="(e, i) in elements" :key="i">
<Banner v-if="!((i + 1) % 4)" />
<div v-else></div>
<div>
In the example below I'm trying to click on Follow Me where the adjacent(ish) <div> is equal to David. This is one of many <div class='_1m' on the page all with the same structure.(does that make sense?)
Sorry first time posting a problem and a forgot one major detail. I know that I'm looking for David but I don't know what the 'Follow Me' Value will be. It changes on each record.
<div class="_1m">
<div class="_8h"><img src="/2323.GIF" /></div>
<div class="_1j">
<div class="_1c">David<span class="_13">abc</span></div>
<div>
<span class="_1v">ABCD</span>
<span class="_1v">1234</span>
</div>
<div>7890</div>
</div>
<div class="_3h">
<div class="_n0">
<span class="_bn"><span class="_la">Follow Me</span></span>
</div>
</div>
</div>
To click on Follow Me where the adjacent <div> contains the text David you can use the following Locator Strategy:
Using xpath and following:
//div[contains(., 'David')]//following::span[3]/span
Using xpath, following and the text Follow Me:
//div[contains(., 'David')]//following::span[3]/span[text()='Follow Me']
Use below xpath //div[#class='_1c'][contains(.,'David')]/../following-sibling::div//span[#class='_la'][contains(.,'Follow Me')]
Explaination:
//div[#class='_1c'][contains(.,'David')] loate the David
/.. move to one parent node of David because follow me emement is sibling of that parent div
/following-sibling::div locate immediate following sibling div
//span[#class='_la'][contains(.,'Follow Me')] Loate the span which has Follow me text
I currently have:
<div class="row">
<div class="col-xs-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-xs-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
This works fine for desktop. However, on mobile the columns are just too small to hold what is needed. In this case, it would be better to have two rows (instead of two columns in one row), with one column in each row.
How could I do it without duplicating the content? The content has some controls like select that should be unique on the page.
Thank you!
I hope this structure will help you.
<div class="row">
<div class="col-sm-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-sm-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
How to control the v-for times dynamically?
I have a case, I want to generate 1->10 divs:
<div v-for="item in 10" style="background-color: red" >{{ item }}</div>
and I want to control the counts dynamically, it maybe 1->3, 2->8, 5-6, how can I do that?
You can add v-if:
<div v-for="item in 10" v-if="item >=min && item <= max" style="background-color: red" >{{ item }}</div>
you can change the min and max dynamically.
You can pass a property of your component's data as the number:
<div v-for="number in count">{{ number }}</div>
If you want to start counting from a different number, you can use a property for that too:
<div v-for="number in count">{{ start - 1 + number }}</div>
See it here in action: https://codepen.io/JosephSilber/pen/vjKBRg
So this totally works (goes from 4 columns to 2 on small screens):
<div class="row">
<div class="col-lg-3 col-sm-6"> 1</div>
<div class="col-lg-3 col-sm-6"> 2</div>
<div class="col-lg-3 col-sm-6"> 3</div>
<div class="col-lg-3 col-sm-6"> 4</div>
</div>
As does my 3-column, however the middle column gets stacked on top of the third one (which by then is the right/2nd column).
<div class="row" id="footer">
<div class="col-lg-3 col-sm-6">
1
</div>
<div class="col-lg-3 col-sm-6">
2
</div>
<div class="col-lg-6 col-sm-6">
3
</div>
</div>
How can I tell the middle column to stack above or underneath the first column? col-sm-pull-6 doesn't work for example.
Desired result:
1 - 3
2 - ..
The problem with switching 2 and 3 and then using push and pull, is that the 2nd column still goes a top of the 3rd column. And I need them to be like in my desired result 'diagram'.
Edit: What I can do is give the first column col-sm-12. This will push the other 2 down. That way the order is good, and since it's for a footer, the fact that the paragraph column is at the complete bottom, isn't bad either. But I'm still open for better suggestions.
The grid now looks like this:
1
2 - 3
Be sure to watch out for divs that have different heights. Those will cause things to not wrap all the way to the left like you might expect.
You can address this using the bootstrap clearfix (even conditionally) with something like:
<div class="clearfix visible-sm"></div>
Put that after a div where you'd want to start a new row at the -sm size. Repeat as needed.
So here goes,
first of all you should use the designs for smaller screens BEFORE larger screens like so:
<div class="col-sm-6 col-lg-3"> (...)
Now for your design to happen you need to to this:
<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>
...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.
edit: here is a working fiddle:
http://jsfiddle.net/ujrwyrbr/2/