web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / Sections on form overl...
Microsoft Dynamics CRM (Archived)

Sections on form overlapping after hiding a webresource

(0) ShareShare
ReportReport
Posted on by Birgit RD 2

Hi,

On our form we have a tab with 3 columns.

The one in the middle contains 3 webresource, a number of multiple line text fields and a few single line text fields.

One of the single line text fields contains input text that is longer than what can be visualised on the screen. So it gets truncated visually.

However when one of the webresources gets hidden based on a condition (by using the setVisible attribute of the control), the layout gets messed up. The text that is truncated will now be displayed and overlaps with the third column.

I figured out that in de fromControls.js, the layout for the section table gets changed from fixed to auto when a control is put invisible.

I see two options:

- create extra sections (but users will complain about the not needed whitespace)

- use a webresource for the long text field.

As we will do a migration to online, we would like an OOB solution.

Has anyone suggestions?

LayoutVisible.pngLayoutInvisible.png

*This post is locked for comments

I have the same question (0)
  • Alex Fun Wei Jie Profile Picture
    Alex Fun Wei Jie 33,628 on at

    Hi,

    can you share the form setting as well?

  • Birgit RD Profile Picture
    Birgit RD 2 on at

    What do you mean by form setting?

    It is the main form for a custom entity.

    Header : 4 fields

    Body: 7 tabs. First tab contains the three sections which get messed up

    Footer is empty

  • Alex Fun Wei Jie Profile Picture
    Alex Fun Wei Jie 33,628 on at

    Hi ,

    I means the customization page for form.

  • Suggested answer
    gdas Profile Picture
    gdas 50,091 Moderator on at

    Hi ,

    What I understand that in the middle section  you have webresource. Is it HTML web resources?

    So is there any CSS applied in the web resources?

    Check what CSS applied in the web resource, which might be causing issue.

    You can share web resource code here.

  • Birgit RD Profile Picture
    Birgit RD 2 on at

    I don't see anything in the css files (2) that are used. CSS are rather long to insert here.

    The webresource uses knockout, and has been written by someone else, hence I cannot give the code.

    For the part that is causing the trouble for us

        centralPaneController.prototype.signalsLoaded = function (data) {

        if (data && data.Output) {
            var data = JSON.parse(data.Output);
            var self = this;

            this.signalDataParse(data.signals, self);

            this._viewModel.signals.removeAll();
            this._viewModel.signals.push.apply(this._viewModel.signals, data.signals);

            var webresourcecontrol = Xrm.Page.getControl("WebResource_CentralSignals");
            if (webresourcecontrol && data.signals.length > 0) {
                webresourcecontrol.setVisible(true);
            }
        }
    };



  • Birgit RD Profile Picture
    Birgit RD 2 on at

    Yesterday, I had little time work on this.

    I have removed the CSS specific for the webresource: did not resolve the issue.

    I tried the same with another webresource. Put it in a section with single text field that is only partially displayed.

    In developer tools I made the webresource invisible. I got exectly the same issue with this other webresource.

    I'll have to check this one out as well, but I start to be afraid it will not be the webresource who is the cause.

  • Birgit RD Profile Picture
    Birgit RD 2 on at

    Below is the code for the second webresource (one html page) that will mess up the layout when put invisible.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
        <style type="text/css">
            body{
                margin: 0;
                margin-left: 20px;
            }
            .star{
                cursor:pointer;
            }
            .star.selected{
                color:orange;
            }
        </style>
	</head>
	<body>
	    <div id="stars">
            
        </div>
        <script type="text/javascript" src="../../../ClientGlobalContext.js.aspx"></script>
        <script src="../Js/JQuery.latest.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../Js/CRMExtensions.js"></script>
        <script type="text/javascript" src="../Js/MultiLanguageCRMExtensions.js"></script>
        <script type="text/javascript">
            var starcount = 5;
            var fieldName = "";
            var initialStars = 0;

            $(function () {
                var data = getDataParameter();
                if (data) {
                    var params = JSON.parse(data);
                    if (params) {
                        if (params.starcount) {
                            starcount = params.starcount;
                        }
                        if (params.field) {
                            fieldName = params.field;
                            debugger;
                            var fieldValue = parent.Xrm.Page.getAttribute(fieldName).getValue();
                            if (fieldValue) {
                                initialStars = parseInt(fieldValue);
                            }
                        }
                    }
                }

                for (var i = 0; i < starcount; i++) {
                    var starx = $("<span class='star' title='" + translate(helpText[i+1]) + "'>&#9734;</span>");
                    $("#stars").append(starx);
                }

                $(".star").slice(0, initialStars).each(function (starindex, star) {
                    $(star).html("&#9733;");
                    $(star).addClass('selected');
                });

                $(".star").click(function () {
                    
                    $(".star").each(function (starIndex, star) {
                        $(star).html("&#9734;");
                        $(star).removeClass('selected');
                    });

                    $(this).html("&#9733;");
                    $(this).addClass('selected');
                    $(this).prevAll().html("&#9733;");
                    $(this).prevAll().addClass('selected');

                    if (fieldName) {
                        var count = $(".star.selected").length;
                        parent.Xrm.Page.getAttribute(fieldName).setValue(count);
                    }
                });
            });

            function getDataParameter(paramName) {
                if (!paramName) paramName = "data";

                paramName = paramName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                var regexS = "[\\?&]" + paramName + "=([^&#]*)";
                var regex = new RegExp(regexS);
                var results = regex.exec(decodeURIComponent(window.location.href));
                if (results === null) return "";
                else return results[1];
            }

            function translate(input) {
                if (CrmExtensions._multiLanguageTranslator && input != null && input != undefined && (typeof input === "string"))
                    return CrmExtensions._multiLanguageTranslator.getTranslation(input);
                else
                    return input;
            }

            var helpText = [];
            helpText[1] = "1 star: Poor, Lead is not relevant. Profile of the prospect/client does not correspond with he suggested offer/area of interest and is not useful at all.|1 Ster: Slecht, deze Lead is niet relevant. Het profiel van de prospect / klant stemt niet overeen met het voorgestelde aanbod/interessegebied en daardoor helemaal niet bruikbaar.|1 étoile: Faible, piste très peu prometteuse. Le profil du prospect/client ne correspond en rien à l'offre / au domaine d'intérêt proposé(e) et n'est d'aucune utilité.|1 Stern: Schlecht, Kontakt ist nicht relevant. Profil des (potenziellen) Kunden entspricht nicht dem vorgeschlagenen Angebot / Interessengebiet und ist in keiner Weise nützlich.";
            helpText[2] = "2 stars: Mediocre, somewhat relevant lead. Profile of the prospect/client does not correspond with he suggested offer/area of interest, but it is useful as an opener for general discussion.|2 Sterren: Middelmatig, enigszins relevante Lead. Het profiel van de prospect / klant stemt niet overeen met het voorgestelde aanbod/interessegebied, maar is bruikbaar als opener voor een algemeen gesprek.|2 étoiles: Médiocre, piste peu prometteuse. Le profil du prospect/client ne correspond en rien à l'offre / au domaine d'intérêt proposé(e), mais peut servir d'entrée en matière pour un entretien d'intérêt général.|2 Sterne: Mittelmäßig, Kontakt von gewisser Relevanz. Profil des (potenziellen) Kunden entspricht nicht dem vorgeschlagenen Angebot / Interessengebiet, ist aber nützlich als Einstieg in eine allgemeine Diskussion.";
            helpText[3] = "3 stars: Average, somewhat relevant lead. Profile of the prospect/client is interesting, but not for the suggested offer/area of interest|3 Sterren: Gemiddeld, enigszins relevante Lead. Het profiel van de prospect / klant is interessant, maar niet voor het voorgestelde aanbod/interessegebied.|3 étoiles: Moyen, piste relativement prometteuse. Le profil du prospect/client est intéressant mais ne correspond pas à l'offre / au domaine d'intérêt proposé(e).|3 Sterne: Durchschnittlich, Kontakt von gewisser Relevanz. Profil des (potenziellen) Kunden ist interessant, aber nicht für das vorgeschlagene Angebot / Interessengebiet.";
            helpText[4] = "4 stars: Good, relevant lead. Profile of the prospect/client corresponds partially with the suggested offer/area of interest.|4 Sterren: Goede, relevante Lead. Het profiel van de prospect / klant stemt deels overeen met het voorgestelde aanbod/interessegebied.|4 étoiles: Bon, piste prometteuse. Le profil du prospect/client correspond partiellement à l'offre / au domaine d'intérêt proposé(e).|4 Sterne: Gut, relevanter Kontakt. Profil des (potenziellen) Kunden entspricht zum Teil dem vorgeschlagenen Angebot / Interessengebiet.";
            helpText[5] = "5 stars: Excellent, relevant lead. Profile of the prospect/client corresponds with the suggested offer/area of interest|5 Sterren: Uitstekende, relevante Lead. Het profiel van de prospect / klant stemt overeen met het voorgestelde aanbod/interessegebied.|5 étoiles: Excellent, poste très prometteuse. Le profil du prospect/client correspond parfaitement à l'offre / au domaine d'intérêt proposé(e).|5 Sterne: Exzellenter, relevanter Kontakt. Profil des (potenziellen) Kunden entspricht dem vorgeschlagenen Angebot / Interessengebiet.";


        </script>
	</body>
</html>


  • Verified answer
    Birgit RD Profile Picture
    Birgit RD 2 on at

    I was able to solve the issue by adding one load in the onload js of the webresource:

    $($(frameElement).parents("table").last()).css("table-layout","fixed");

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans