I have below url for parellex scrolling.I would like to know how to use parellex scrolling in blazor syncfusion
https://www.w3schools.com/howto/howto_css_parallax.asp
Sorry for asking questions again..
Please find my exact requirements in below.
I have six grid control in single page.I would like to show or hide grid when scrolling down.
Thanks got it
sorry for late reply..
please check my actual requirement in below video
https://www.screencast.com/t/TLMRyVsQxdQz
please help
<style>
...
.TextFixedStyle{
position:fixed;
}
</style>
<EditForm Model="@context" @attributes="@FormAttributes" >
<div class="TextFixedStyle">
<SfTextBox Placeholder="Enter Text"></SfTextBox><br>
<SfTextBox Placeholder="Enter Text"></SfTextBox><SfDropDownList TValue="string" TItem="string"></SfDropDownList><br>
<SfDatePicker TValue="DateTime?"></SfDatePicker>
</div>
</EditForm>
|
please check my comments in below link
https://www.screencast.com/t/sqXaEKzPJVVq
and also please check my code below which has three card
@inherits SampleStyleEditBase
@*<div class="TextFixedStyle">*@
<SfCard>
<CardHeader>
<h3 id="UCardHeader">@GetResourceProvider.GetResourceValue(Resource, "lblSampleStyleListHeader")</h3>
<div class="col 10 m10 l10" style="text-align: right;">
<SfButton CssClass="btnFont mr-1">Back</SfButton>
<SfButton CssClass="btnFont mr-1">Save</SfButton>
<SfButton CssClass="btnFont mr-1">SRF</SfButton>
</div>
</CardHeader>
<CardContent>
<table class="table" style="padding-left:5px; padding-right:5px;padding-top:25px">
<tr>
<th>
<div style="height: 4.6cm;width: 100%; border:1px">
<img id="img2" src="SRFImage/UIUXShoe.jpg" alt="Image" />
</div>
</th>
<th style="width: 88%;">
<EditForm Model="@sampleStyleSetup">
<DataAnnotationsValidator></DataAnnotationsValidator>
<div class="row">
@*<div class="col s12">*@
@foreach (var columns in productFieldMappingSetups)
{
var visible = columns.Visible;
var mandatory = columns.Mandatory;
var enable = @mode == CommonClassEnum.ComponentModes.Disable ? false : columns.Enable;
var resourceKey = columns.FieldName;
var mandatoryIndicator = "e-success";
if (mandatory)
mandatoryIndicator = "required";
if (resourceKey == "BuyerID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblBuyerName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlBuyer" DataSource="@buyerSetups" @bind-Value="@sampleStyleSetup.BuyerID" FloatLabelType="@FloatLabelType.Always" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "BuyerID")" CssClass="mandatoryIndicator">
<DropDownListFieldSettings Value="BuyerID" Text="BuyerName"></DropDownListFieldSettings>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.BuyerID)" />
</div>
}
if (resourceKey == "ProductID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblProductName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlProduct" DataSource="@referenceDetailsSetups" @bind-Value="@sampleStyleSetup.ProductID" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></DropDownListFieldSettings>
<DropDownListEvents TItem="ReferenceDetailsSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.ProductID)" />
</div>
}
if (resourceKey == "GenderID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblGenderName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlGender" DataSource="@referenceDetailsGender" @bind-Value="@sampleStyleSetup.GenderID" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "GenderID")" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></DropDownListFieldSettings>
<DropDownListEvents TItem="ReferenceDetailsSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.GenderID)" />
</div>
}
if (resourceKey == "BuyerStyleNo" && visible)
{
<div class="col s12 m6 l4">
<SfTextBox Enabled="@enable" Placeholder="Buyer Style" @bind-Value="sampleStyleSetup.BuyerStyleNo" HtmlAttributes="@commonHtmlAttribute.codeHtmlAttribute" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
<ValidationMessage For="@(() => sampleStyleSetup.BuyerStyleNo)" />
</div>
}
if (resourceKey == "BuyerStyleDescription" && visible)
{
<div class="col s12 m6 l4">
<SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "BuyerStyleDescription")" @bind-Value="sampleStyleSetup.BuyerStyleDescription" FloatLabelType="@FloatLabelType.Always"></SfTextBox>
<ValidationMessage For="@(() => sampleStyleSetup.BuyerStyleDescription)" />
</div>
}
if (resourceKey == "RefNo" && visible)
{
<div class="col s12 m6 l4">
<SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "RefNo")" @bind-Value="sampleStyleSetup.RefNo" FloatLabelType="@FloatLabelType.Always" HtmlAttributes="@commonHtmlAttribute.codeHtmlAttribute"></SfTextBox>
<ValidationMessage For="@(() => sampleStyleSetup.RefNo)" />
</div>
}
if (resourceKey == "SizeClassID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblSizeClassName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlSizeClass" DataSource="@sizeClassSetups" @bind-Value="@sampleStyleSetup.SizeClassID" FloatLabelType="@FloatLabelType.Always" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SizeClassID")">
<DropDownListFieldSettings Value="SizeClassID" Text="SizeClassName"></DropDownListFieldSettings>
<DropDownListEvents TItem="SizeClassSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.SizeClassID)" />
</div>
}
if (resourceKey == "WidthClassID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblWidthClassName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlWidthClass" DataSource="@widthClassSetups" @bind-Value="@sampleStyleSetup.WidthClassID" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="WidthClassID" Text="WidthClassName"></DropDownListFieldSettings>
<DropDownListEvents TItem="WidthClassSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.WidthClassID)" />
</div>
}
if (resourceKey == "CollectionID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblCollectionName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlCollection" DataSource="@collectionSetups" @bind-Value="@sampleStyleSetup.CollectionID" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="CollectionID" Text="CollectionName"></DropDownListFieldSettings>
<DropDownListEvents TItem="CollectionSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.CollectionID)" />
</div>
}
if (resourceKey == "ConstructionID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblConstructionName")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlConstruction" DataSource="@constructionSetups" @bind-Value="@sampleStyleSetup.ConstructionID" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="ConstructionID" Text="ConstructionName"></DropDownListFieldSettings>
<DropDownListEvents TItem="ConstructionSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.ConstructionID)" />
</div>
}
if (resourceKey == "LastTrNo" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblLastTrNo")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlLastTrNo" DataSource="@lastSetups" @bind-Value="@sampleStyleSetup.LastTrNo" Readonly="true" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="LastID" Text="LastName"></DropDownListFieldSettings>
<DropDownListEvents TItem="LastSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.LastTrNo)" />
</div>
}
if (resourceKey == "LastID" && visible)
{
<div class="col s12 m6 l4">
@*<label>@GetResourceProvider.GetResourceValue(Resource, "lblLastID")</label>*@
<SfDropDownList Enabled="@enable" ID="ddlLast" DataSource="@lastSetups" @bind-Value="@sampleStyleSetup.LastID" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Value="LastID" Text="LastName"></DropDownListFieldSettings>
<DropDownListEvents TItem="LastSetup" TValue="int"></DropDownListEvents>
</SfDropDownList>
<ValidationMessage For="@(() => sampleStyleSetup.LastID)" />
</div>
}
if (resourceKey == "SampleStyleNo" && visible)
{
<div class="col s12 m6 l4">
<SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SampleStyleNo")" @bind-Value="sampleStyleSetup.SampleStyleNo" FloatLabelType="@FloatLabelType.Always" Readonly="true"></SfTextBox>
</div>
}
if (resourceKey == "SampleCreatedDate" && visible)
{
<div class="col s12 m6 l4">
<SfDatePicker Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SampleCreatedDate")" @bind-Value="sampleStyleSetup.SampleCreatedDate" FloatLabelType="@FloatLabelType.Always"></SfDatePicker>
<ValidationMessage For="@(() => sampleStyleSetup.SampleCreatedDate)" />
</div>
}
if (resourceKey == "PackageReceivedDate" && visible)
{
<div class=col s12 m6 l4">
<SfDatePicker Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "PackageReceivedDate")" @bind-Value="sampleStyleSetup.PackageReceivedDate" FloatLabelType="@FloatLabelType.Always"></SfDatePicker>
<ValidationMessage For="@(() => sampleStyleSetup.PackageReceivedDate)" />
</div>
}
}
</div>
</EditForm>
</th>
</tr>
</table>
</CardContent>
</SfCard>
@*</div>*@
<SfCard>
<CardContent>
<div class="row" style="padding-left:5px; padding-right:5px;padding-top:35px ">
<div class="col s12 m12 l12 ">
<SfGrid DataSource="@Orders" AllowPaging="true" ID="GridBackColor">
<GridPageSettings PageSize="5"></GridPageSettings>
</SfGrid>
</div>
</div>
</CardContent>
</SfCard>
<SfCard>
<CardContent>
<div class="col s12 m12 l12 ">
<div class="row" style="padding-left:5px; padding-right:5px;padding-top:25px ">
<div class="col s12 m12 l12 ">
<SfTab CssClass="parent-tab-class" Height="500px" Width="100%" OverflowMode="OverflowMode.Scrollable">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="SIZE BREAK"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailSizeList />
</ContentTemplate>
</TabItem>
<TabItem>
<ContentTemplate>
<SfTab HeaderPlacement="HeaderPosition.Left" CssClass="third-nested-tab-class">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="LEATHER"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailBomLeatherList />
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="MATERIAL"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailBomMaterialList />
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="LINING"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailBomLeatherList />
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
</ContentTemplate>
<ChildContent>
<TabHeader Text="BILL OF MATERIAL"></TabHeader>
</ChildContent>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="PROCESS SPEC"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailProcessSpecList />
</ContentTemplate>
</TabItem>
<TabItem>
<ContentTemplate>
<SfTab HeaderPlacement="HeaderPosition.Left" CssClass="third-nested-tab-class">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="ORDER"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailOrderCommentList />
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="DESPATCH"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailDespatchCommentList />
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
</ContentTemplate>
<ChildContent>
<TabHeader Text="COMMENTS"></TabHeader>
</ChildContent>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="ATTACHMENT"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailProcessSpecList />
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="COMMUNICATION"></TabHeader>
</ChildContent>
<ContentTemplate>
<SrfDetailDespatchCommentList />
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
</div>
</div>
</div>
</CardContent>
</SfCard>
<style>
.ImgStyle {
border: 1px solid;
height: 170px;
width: 270px;
padding-left: 5px;
}
.e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item {
height: 0;
width: 175px;
border-left: 33px solid transparent;
border-right: 33px solid transparent;
margin-top: -6px;
}
.e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active {
border-bottom: 40px solid #2b2b2b;
}
.e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item {
border-bottom: 40px solid whitesmoke;
}
.e-tab.parent-tab-class .e-tab-header .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
margin-top: -6px;
}
.e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft .e-tab-wrap,
.e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright .e-tab-wrap {
height: 76px;
padding-top: 42px;
color: #2b2b2b;
}
.e-tab.parent-tab-class .e-tab-header .e-toolbar-item .e-tab-wrap {
padding-left: 0;
padding-right: 0;
text-align: center;
}
.e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,
.e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text {
color: white;
}
.e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-indicator {
left: 0 !important;
right: 0 !important;
background: #2b2b2b;
}
.e-tab.parent-tab-class .e-tab-header:not(.e-vertical) {
padding-left: 100px;
}
.e-tab.first-nested-tab-class .e-tab-header .e-indicator,
.e-tab.second-nested-tab-class .e-tab-header .e-indicator,
.e-tab.third-nested-tab-class .e-tab-header .e-indicator {
top: 10px !important;
bottom: 0 !important;
height: 130px !important;
background: #2b2b2b;
}
.e-tab.first-nested-tab-class .e-tab-header .e-toolbar-items,
.e-tab.second-nested-tab-class .e-tab-header .e-toolbar-items,
.e-tab.third-nested-tab-class .e-tab-header .e-toolbar-items {
padding-right: 20px;
}
.e-tab.first-nested-tab-class.e-vertical-tab .e-content .e-item.e-active,
.e-tab.second-nested-tab-class.e-vertical-tab .e-content .e-item.e-active,
.e-tab.third-nested-tab-class.e-vertical-tab .e-content .e-item.e-active {
padding-left: 20px;
}
.e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,
.e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text,
.e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,
.e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text,
.e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,
.e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text {
color: #2b2b2b;
}
/*.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
font-family: Poppins;
font-size: 8px;
}*/
/*text and combo control*/
/*.e-input-group input.e-input,
.e-float-input.e-input-group input,
.e-input-group.e-control-wrapper input.e-input,
.e-float-input.e-input-group.e-control-wrapper input,
.e-float-input input,
.e-float-input.e-control-wrapper input {
font-family: Poppins;
min-height: 12px;
}*/
/*Modify font size */
/*.e-float-input,
.e-float-input.e-control-wrapper {
font-size: 12px;
font-family:Poppins;
}*/
/* Font size for placeholder on top */
/*.e-float-input input:valid ~ label.e-float-text,
.e-float-input input ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
font-size: 8px;
font-family: Poppins;
}*/
/*Font size for placeholder on bottom */
/*label.e-float-text,
.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text,
.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
font-size: 8px;
font-family: Poppins;
}*/
@@media only screen and (max-width: 700px) {
#img2 {
width: 200px;
height: 200px;
position: fixed;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
}
#img2 {
width: 200px;
height: 200px;
}
.TextFixedStyle {
position: fixed;
}
</style>
I am using pixinventix materialize with syncfusion theme
Is there any conflict in between there ???