i need this FLUID Code "inline":
<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
</f:for>
and here a Test with Image-Url:
{f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject:contentObject)}', as:'fileReference', iteration:'iterator') -> f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1')}
but, it dont work :(
Thanks,
Sebastian
Inline syntax reverse the order (child node comes before parent node). Correct syntax:
{f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1')
-> f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject: contentObject)}', as: 'fileReference', iteration: 'iterator')}
Same can be used to render a section for example, in case you need to add additional markup that is not added by the ViewHelpers themselves.
I propose to use an own section for it in combination with the <f:spaceless /> ViewHelper.
An (untested) example:
<f:section name="main">
<f:render section="imgs" arguments="{field:field,fieldName:'textImageTeaserImage',contentObject:contentObject}" />
</f:section>
<f:section name="imgs">
<f:spaceless>
<f:for each="{dce:fal(field:fieldName, contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
</f:for>
</f:spaceless>
</f:section>
that work:
<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<div style="background-image: url('{f:uri.image(src: '{fileReference.uid}', treatIdAsReference: 1, absolute: 1)}');">
</f:for>
but this is not fine :)
Related
hope this is ok to post here.
I have multiple drawers in my web app containing drop-down boxes, calendars and text inputs. Since I updated to 0.14.2, the dropdowns and calendars no longer work. However, the text fields are all ok. The data populates each of these components as expected (they pull data from the DB and make the items appear correctly.) However, when I try to click on a drop-down item, the drop-down menu does not respond to the change, neither does the calendar etc.
I have looked at all of the docs, and I appear to be doing everything correctly, but this problem persists. As a test, I rendered these components within the row, and everything works as expected; it is only once it is inside of a drawer that it stops working. Everything works as expected in "AntDesign" Version="0.12.7".
Any suggestions?
<Drawer Closable="true" Width="720" Visible="drawerVisible" Title=#Pagetitle OnClose="_=>Close(Data)">
<Row Gutter="16">
<AntDesign.Col Span="24">
<Text><b>Title</b></Text>
<Input #bind-Value="Data.Title" Placeholder=" Please enter a Data Title" TValue="string"></Input>
</AntDesign.Col>
</Row>
<br />
<Row Gutter="16">
<AntDesign.Col Span="12">
<Text><b>Engineer</b></Text>
<Select Placeholder="Select Engineer" PopupContainerMaxHeight="500px" #bind-Value=Data.UploadedBy ValueName="#nameof(DataUser.UserId)" LabelName="#nameof(DataUser.UserName)" DefaultActiveFirstOption Loading=!Users.Any() DataSource=#Users.Where(u => u.Is_Active == true).OrderBy(u => u.UserName) />
</AntDesign.Col>
</Row>
<Row>
<AntDesign.Col Span="12">
<Text><b>Customer</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.CustomerId ValueName="#nameof(DataCustomer.CustomerId)" LabelName="#nameof(DataCustomer.CustomerName)" Placeholder="Select Customer" DefaultActiveFirstOption Loading=!Customers.Any() DataSource=#Customers />
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Priority</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.Priority ValueName="#nameof(DataPriority.Priority)" LabelName="#nameof(DataPriority.PriorityName)" Placeholder="Select Prioirity" DefaultActiveFirstOption Loading=!Priorities.Any() DataSource=#Priorities />
</AntDesign.Col>
</Row>
<br />
<br />
<Row>
<AntDesign.Col Span="12">
<Text><b>Select Date</b></Text>
<div class="site-calendar-demo-card">
<DatePicker TValue="DateTime?" Picker="#DatePickerType.Date" #bind-Value=Data.ExpiryUtc />
</div>
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Select Item</b></Text>
<Select Mode="multiple"
Placeholder="Please select"
#bind-Values="SelectedItems"
TItemValue="int"
TItem="string"
OnSelectedItemsChanged="OnSelectedItemsChangedHandler"
Style="width: 100%; margin-bottom: 8px;"
EnableSearch>
<SelectOptions>
#foreach (var item in Items) {
<SelectOption TItemValue="int" TItem="string" Value=#item.ItemId Label=#item.ItemName />
}
</SelectOptions>
</Select>
</AntDesign.Col>
</Row>
<br />
<AntDesign.Col Span="24">
<Button Type="default" Style="float: right" #onclick="_=>Close(Data)">Cancel</Button>
#if (Pagetitle == "New Data Item") {
<Button Type="primary" Style="float: right" #onclick="_=>OnSubmit(Data)">Submit</Button>
} else {
<Button Type="primary" Style="float: right" #onclick="_=>UpdateDataItem(Data)">Update</Button>
}
</AntDesign.Col>
</Drawer>
It's a bug it seems. Oh well...
https://github.com/ant-design-blazor/ant-design-blazor/issues/3102
I have the following template:
<template>
<q-item tag="label" v-ripple>
<q-popup-edit
v-model="editedModel"
#before-show="onFieldClick"
#save="setValue"
:cover="false"
fit
buttons
>
<template v-slot:title>
<div class="text-mono">{{ name }}</div>
</template>
<q-select
dense
autofocus
emit-value
v-model="editedModel"
multiple
:options="options"
counter
/>
</q-popup-edit>
<q-item-section>
<q-item-label class="text-mono">{{ name }}</q-item-label>
<q-item-label caption>{{ description }}</q-item-label>
<q-item-label caption>{{ model }}</q-item-label>
</q-item-section>
</q-item>
</template>
The #save method is never called. What do I miss? Thanks.
For me worked the following:
I added: v-slot="scope" to the q-popup-edit
<q-popup-edit v-model="initialValue" v-slot="scope" buttons #save="save">
and then I replaced my v-model inside q-input to this:
<q-input v-model="scope.value" >
I have multiple divs with multiple imgs under them. I'd like to get the div with the correct img src. How can I do this? I tried this and it didn't work. It just compared the src with the first div and failed.
cy.get('.card').find('.info-section > .logo').should('have.attr', 'src', '/assets/icons/fruit.svg')
Reverse the search order - target the child element with that specific attribute, then traverse to the card parent
cy.get('[src="/assets/icons/fruit.svg"]')
.parent('.card')
It would greatly help your situation if you provided the DOM to see the multiple divs and imgs.
I'll be using the example DOM below.
<div class="card">
<div class="info-section">
<img src="/assets/icons/vegetable.svg" />
<div class="logo">
<img src="/assets/icons/fruit.svg" />
</div>
</div>
</div>
<div class="card">
<div class="info-section">
<img src="/assets/icons/vegetable.svg" />
<div class="logo">
<img src="/assets/icons/fruit.svg" />
</div>
</div>
</div>
To get the <img src="/assets/icons/fruit.svg" /> and test it has src, you will do the following:
cy.get('div.logo') // get div with class logo
.find('img') // find img children
.should('have.length', 1) // should only return 1 element
.should('have.attr', 'src', '/assets/icons/fruit.svg') // should have src attr
I am trying to click the second tab Tab1_imgImbillsTab.
<div id="menuTabsForPageContainer" >
<div id="menuTabsForPage">
<img id="Tab1_imgHomePageTab" accesskey="H" disabled="disabled" class="imgHomePageTab" src="images/home_deselected_tab.png" alt="Home" style="border-width:0px;" />
<img id="Tab1_imgImbillsTab" accesskey="B" class="imgImbillsTab" src="images/bills_deselected_tab.png" alt="Bills" style="border-width:0px;" />
<img id="Tab1_imgArchiveTab" accesskey="C" class="imgArchiveTab" src="images/chartrack_deselected_tab.png" alt="Chart Rack" style="border-width:0px;" />
<img id="Tab1_imgPracMgmtTab" accesskey="I" class="imgPracMgmtTab" src="images/managementreporting_deselected_tab.png" alt="Business Intelligence" style="border-width:0px;" />
<img id="Tab1_imgSysToolTab" accesskey="Y" class="imgSysToolTab" src="images/systemtools_deselected_tab.png" alt="System Tools" style="border-width:0px;" />
<img id="Tab1_imgBulletinTab" accesskey="S" class="imgBulletinTab" src="images/settings_deselected_tab.png" alt="Settings" style="border-width:0px;" />
</div>
</div>
I tried several things:
browser.button(:id => 'Tab1_imgImbillsTab').click
browser.div(:id, "menuTabsForPage").div(:id, "menuTabsForPage").button(:id, "Tab1_imgImbillsTab").click
I also tried to reference it as a clickable image by referencing the "src" of the image. These tabs, I believe have JavaSceript behind them. I can not figure out what I'm doing wrong.
The code:
browser.button(:id => 'Tab1_imgImbillsTab').click
Says to find a button element or input element (of type button, reset, submit or image) that has the id "Tab1_imgImbillsTab".
However, based on the HTML, the tab is an img tag. As a result, it will never be found by the button method. Tell Watir to look for the img tag instead:
browser.img(:id => 'Tab1_imgImbillsTab').click
my template includes following:
<h1 style="height: 80px;" /><img border="0" src="/somemoduledirectoryhere/Headline.ashx?c=sometexthere&fc=" alt="anothertexthere" /></h1>
<h2 style="margin-top: 20px;margin-left: 5px;">someheadlinehere</h2>
I receive following errors during XHTML 1.0 transitional markup.
document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
end tag for element "h1" which is not open
Would you please suggest me how to fix these two problems?
Thank you.
You're self closing the H1 tag
Remove the forward slash in:
<h1 style="height: 80px;" />
so its
<h1 style="height: 80px;">
<h1 style="height: 80px;" />
^
Remove the self-closing tag syntax.
In first line, you self-close h1:
<h1 style="height: 80px;" />
should be
<h1 style="height: 80px;">