This is a migrated thread and some comments may be shown as answers.

Postback Column CSS

4 Answers 91 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Veteran
Brian asked on 08 May 2020, 05:35 PM

It seems that after a PB the LayoutColumn loses its span if i have a CSS set.

Ex:

3 Columns, span=3, span=6, span=3. middle layoutcolumn is centered. after a PB, all 3 columns are displaying like a span=12

This only happens on a CSS to the CompositeLayoutColumn and when i use telerik postback controls - panel or manager. the asp UpdatePanel does not wipe out the Column spans. If the CSS is removed on the CompositeLayoutColumn it doesnt have any issues and stays where it should according to the spanning, 3, 6, and 3

 

<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="false">
                <telerik:LayoutRow>
                    <Columns>
                        <telerik:LayoutColumn Span="4" HiddenXs="true" SpanSm="1" SpanMd="2" SpanLg="3" />
                        <telerik:CompositeLayoutColumn CssClass="fieldsetOpt0" Span="4" SpanXs="12" SpanSm="10" SpanMd="8" SpanLg="6">
</telerik:CompositeLayoutColumn>
                        <telerik:LayoutColumn Span="4" HiddenXs="true" SpanSm="1" SpanMd="2" SpanLg="3" />
                    </Columns>
                </telerik:LayoutRow>
            </telerik:RadPageLayout>
 
 
.fieldsetOpt0 {
    -webkit-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 2.5px #101010;
    border-radius: 10px;
    border-color: black;
    border-style: solid;   
    border-width: 1px;
    padding: 2.5px;
    width: 100%;
}

 

 

4 Answers, 1 is accepted

Sort by
0
Brian
Top achievements
Rank 1
Veteran
answered on 08 May 2020, 05:39 PM
I have images, but i cant post them. odd
0
Doncho
Telerik team
answered on 13 May 2020, 02:59 PM

Hi Brian,

Normally, PostBack should not cause losing styles.
On the other hand, when control is Ajaxified it gets wrapped into an update panel. The update panels initially are block elements, which is causing new lines. If that is the case please check out the forum thread on the topic: CSS Formatting Lost.

Another possible reason for the experienced appearance can be setting the width of the styled LayoutColumn to 100%.
The LayoutColumn(s) are rendered as 'div' elements. That styling will force the 'div' element, rendered by the styled column, to occupy the whole width of its parent element and move other LayoutColumn(s) on other rows.

If none of these is causing the issue I would need more information on the issue. Please provide us the whole markup page so that we have a better overview of how is the postback causing the issue made and how is the AJAX implemented, check out Understanding AJAX Controls article.

I suggest you open a formal support ticket and share a video or screenshots that would help us have a better understanding of the issue.

I have attached a basic sample for you to try. It also would be very helpful if you modify it so that it replicates the issue and send it back to us. Or give us the steps to reproduce the case on our own.

Looking forward to hearing from you!

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Brian
Top achievements
Rank 1
Veteran
answered on 13 May 2020, 03:04 PM
I have images, but cant find out how to upload them. The option is missing. Please advise - thanks
0
Doncho
Telerik team
answered on 14 May 2020, 07:53 AM

Hi Brian,

You can open a formal support ticket. There you will have the option to share files with us.

You can do that from your Telerik Account by selecting the "Get Technical Support"  in the "Support" menu.

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
PageLayout
Asked by
Brian
Top achievements
Rank 1
Veteran
Answers by
Brian
Top achievements
Rank 1
Veteran
Doncho
Telerik team
Share this question
or