Search code examples
cssvisual-studio-lightswitchlightswitch-2013

Lightswitch HTML - screen over-stretches

I have noticed this for a while however that when using Lightswitch and setting properties to "Stretch to Container", that the screen sometimes appears to be over-stretched and moves items down to the next line, for example:

enter image description here

enter image description here

When pressing the "See My Projects Only" the buttons switch (so I hide this one and display the other option" using the below code:

if (screen.ChangeDefaultValue.count > 0) { screen.ChangeDefaultValue.selectedItem = screen.ChangeDefaultValue.data[0];

    screen.ChangeDefaultValue.selectedItem.HomepageProjectsDefault = false;

    screen.DefaultOption = null;

    myapp.applyChanges();

    setTimeout(function () {
        screen.Projects.refresh();
    }, 100);

    screen.findContentItem("SeeAllProjects").isVisible = false;
    screen.findContentItem("SeeMyProjectsOnly").isVisible = true;
}
else {

}

This works perfectly, however as you can see in the 2nd image above, the button moves down below the parameter search box as if it has been overstretched. I have tried changing the margin and padding of the .msls-content however this error still occurs here and on multiple of my other pages.

Has anyone found a fix to this problem?

Further information:

THE PROBLEM

this small block of code in the msls-2.5.3.css appears to be the issue however if I comment it out then other screens break. all of the padding in the height appears to disappear and they all overlap each other on the modal screens

.msls-clear {
    clear: both;
}
Solution

  • In LightSwitch HTML, we can use column layout option to render the control in each column. By setting "stretch to container" property, column is only stretched to container size and not the control inside each column is stretched with container. Controls are properly rendered inside the container. Issue occurs due to the column width stretches when hide and show the content item and this is not related with component used in the page. Follow the below workaround solution while remove the content item dynamically by click on the button. Please remove the class ‘msls-clear’ on button click or apply clear: none to the class ‘msls-clear’. this.element.parents(".msls-column").next(".msls-clear").removeClass("msls-clear")

    Hope this will helps you..!

    Thanks, Francis