Postback Column CSS

[Brian]

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%;
}

 

 

[Brian]

I have images, but i cant post them. odd

[Doncho]

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

[Brian]

I have images, but cant find out how to upload them. The option is missing. Please advise - thanks

[Doncho]

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