[FIXED] [#1417] [4.4.1] Large note makes indicator hard to see

  1. #1

    [FIXED] [#1417] [4.4.1] Large note makes indicator hard to see

    Please see example below. Since the note is really large, it moves the indicator so far out, it is hard to tell where it belongs.
    Likely, the note size should not affect the indicator.
    Please suggestion resolution.
    Thanks,
    /Z.


    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel Row with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
    
            <style type="text/css">
            .red-text {
                color     : red;
                font-size : large;
            }
        </style>
    
    
        <script>
            var runMe = function () {
                App.TESTSETET.show();
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
                <Listeners>
                    <DocumentReady Handler="runMe()" />
                </Listeners>
            </ext:ResourceManager>
    
    
    
    
        <ext:Window 
            ID="TESTSETET" 
            runat="server" 
            Icon="ApplicationFormAdd" 
            Width="500" 
            Hidden="true" 
            Modal="true"
            Layout="FitLayout"
            Title="TEST">
            <Items>
                <ext:FormPanel
                    ID="FormTEST" 
                    runat="server" 
                    Layout="VBoxLayout"
                    BodyPadding="5"
                    >
                    <Items>
                        <ext:Checkbox 
                            ID="T2424234"
                            runat="server"
                            IndicatorText="*" 
                            IndicatorCls="red-text" 
                            AllowBlank="false"
                            FieldLabel="Test Large Note"
                            Note="This is a really really really large note,<br/>I am glad i entered it like this" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Sep 26, 2017 at 7:22 AM.
  2. #2
    Hello @Z!

    In this case, one of the solutions is to redirect the indicator position to sit next to the field. I can't say this will work on other components cause there's the issue with resizing the fields (for text fields for example) when showing the indicator character. In other words, as a check box is not really something we usually resize, then this solution might work for checkboxes but not necessarily for other components.

    Here's what you should change in your example to have the red asterisk always next to the checkbox field:

    1. add to your red-text CSS class: display: inline.
    2. clear the indicator template so the component does not try to apply the indicator by adding IndicatorTpl="" to your checkbox properties.
    3. Inside the checkbox block, add a template to append the indicator (extracted from sources, this will probably break if/when new releases change this template) right next the checkbox field:

    <AfterBoxLabelTpl runat="server">
        <Html>
            <div id="{id}-indicator" style="position:relative;display:table-cell;">
                <div class="x-field-indicator {indicatorCls} {indicatorIconCls}">{indicatorHtml}</div>
            </div>
        </Html>
    </AfterBoxLabelTpl>
    And you should have the checkbox the way you wanted it. You can fiddle more with your red-text CSS class if you want to fine-tune the location of the indicator (a little above, a little below, font, etc).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @Z!

    Been some days since I last posted a follow-up here and still no word from you. Did the suggestion above work for you? Do you still need help on that issue?
    Fabrício Murta
    Developer & Support Expert
  4. #4
    sorry for delay.

    I see your response. i think it is more complicated than i want to apply. I dislike to customize these types of fixes as upgrades become troublesome.

    I would prefer if this is just resolved in a future version as this should work out of the box.

    Thanks,
    /Z
  5. #5
    Hello @Z!

    Although this problem happens on both v3 and v4, as both versions diverge the fix won't be the exact same it seems. We've created an issue to fix this on v4 since you reported here but didn't mention here as your request was specific for version 3.

    Anyway, we'll add a note to try and also fix this on version 3 with the solution we make to version 4 if it is feasible.

    The logged issue is #1417. Unfortunately in the short term what we can offer is the patch solution for the issue.

    Here's a reviewed example applying the concepts I mentioned in the post above:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Large Indicator - v3</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
        <style type="text/css">
            .red-text {
                color     : red;
                font-size : large;
                position  : absolute;
                top       : -18px;
                left      : 20px
            }
        </style>
        <script>
            var runMe = function () {
                App.win1.show();
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
                <Listeners>
                    <DocumentReady Handler="runMe()" />
                </Listeners>
            </ext:ResourceManager>
        <ext:Window 
            ID="win1" 
            runat="server" 
            Icon="ApplicationFormAdd" 
            Width="500" 
            Hidden="true" 
            Modal="true"
            Layout="FitLayout"
            Title="TEST">
            <Items>
                <ext:FormPanel
                    ID="tf1" 
                    runat="server" 
                    Layout="VBoxLayout"
                    BodyPadding="5"
                    >
                    <Items>
                        <ext:Checkbox 
                            ID="cb1"
                            runat="server"
                            IndicatorText="*" 
                            IndicatorCls="red-text"
                            IndicatorTpl=""
                            AllowBlank="false"
                            FieldLabel="Test Large Note"
                            Width="400"
                            Note="This is a really really really large note,<br/>I am glad i entered it like this">
                            <AfterBoxLabelTpl runat="server">
                                <Html>
                                    <div id="{id}-indicator" style="position:relative;display:table-cell;">
                                        <div class="x-field-indicator {indicatorCls} {indicatorIconCls}">{indicatorHtml}</div>
                                    </div>
                                </Html>
                            </AfterBoxLabelTpl>
                        </ext:Checkbox>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Hope this helps for now!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello @Z!

    We're confident we fixed this issue now. The field notes should span further while the indicator is kept close to the checkbox.

    Here's an screenshot of the test case, based on the ones worked in the previous posts of this thread, exploring more potential set ups of the checkbox field using that notes + indicator set up.

    Click image for larger version. 

Name:	61710-fieldNoteVariations.png 
Views:	26 
Size:	36.6 KB 
ID:	25051

    The fix is now available from GitHub sources and will be released soon with Ext.NET 4.4.1 (review release for 4.4.0).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jul 21, 2014, 1:53 PM
  2. Replies: 2
    Last Post: May 29, 2013, 11:28 AM
  3. [CLOSED] Binding Large Set of Data to a Grid makes browser unresponsive
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 14, 2011, 4:01 PM
  4. Replies: 2
    Last Post: Apr 09, 2010, 9:25 AM
  5. [CLOSED] Combobox makes page with large image really slow
    By jchau in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 10, 2009, 4:06 AM

Posting Permissions