PDA

View Full Version : [CLOSED] Image is cutoff on page load



edip
Jul 11, 2016, 5:40 PM
Hello,
I have created a vbox band with stretch on and have added a fill component with a flex of 1 between 2 images so that they appear on the far left and far right, but when the page loads, the image on the right is cutoff. It works fine when i resize but just the loading is incorrect as you can see in the image below...
24668

once i resize the page it looks fine as seen below...
24669

The code can be found at https://drive.google.com/open?id=0B7DjyvuiqD5NY0VwZE9FYkd5WVU

Thanks.

fabricio.murta
Jul 11, 2016, 10:15 PM
Hello Emidio!

Sorry, I can run your solution but I see several points that are potentially misleading in your example. Initially I don't seem to reproduce your issue as the project has no images at all. Or at least the links are broken.

Also as per our rules, we require you to review your test case and provide it as a code here as minimalistic as possible, only view+controller and model when required and further views only and only when they are required to reproduce the issue. No layout page seems to be required reproducing your issue, though.

Hope you understand, and below's some guidelines we gathered to help providing test cases:

Please provide a simplified code sample demonstrating how to reproduce the issue.

The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

Tips for creating simplified code samples (http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples)

If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.

The following two forum posts provide many excellent tips for posting in the forums:

1. More Information Required (http://forums.ext.net/showthread.php?10205-More-Information-Required)
2. Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

edip
Jul 12, 2016, 7:21 PM
I have made the code as simple as possible and have added it to the view and you can download it at...

https://drive.google.com/open?id=0B7DjyvuiqD5NX00xUzM5anp2eEU

Below is the view code that is cutting off the right side image...


@section NorthRegion
{
@(

X.Container ( )
.Anchor ( "100%" )
.Cls ( "YellowGreenBackground" )
.Layout ( Ext.Net.LayoutType.VBox )
.LayoutConfig
(
new Ext.Net.VBoxLayoutConfig
{
Align = Ext.Net.VBoxAlign.Stretch
}
)
.Items
(
X.Container()
.Layout(Ext.Net.LayoutType.VBox)
.LayoutConfig ( new Ext.Net.VBoxLayoutConfig
{
Align = VBoxAlign.Stretch
} )
.Items
(
X.Toolbar()
.Cls("TopLinksToolbar"),
X.Container()
.AnchorHorizontal("100%")
.Layout(Ext.Net.LayoutType.HBox )
.LayoutConfig( new Ext.Net.HBoxLayoutConfig
{
Align = Ext.Net.HBoxAlign.Middle
})
.Items
(
X.Image()
.Height ( 74 )
.MarginSpec ( "5 0 5 5" )
.HideMode ( Ext.Net.HideMode.Visibility )
.ImageUrl ( "Images/Bird.png" ),
X.Component()
.Flex(1),
X.Image()
.Height ( 74 )
.MarginSpec ( "20 5 0 0" )
.ImageUrl ( "Images/Reebok.png" )

)
)
)
)

}

fabricio.murta
Jul 12, 2016, 9:58 PM
Hello Emidio!

Please do not provide solution nor links unless asked for. That's not cause we don't like nor want it, that's because the solution might just be unavailable after a few months when this thread may be searched for, so it would become quite useless in time.

We have recently discussed using pre-made solution files and decided it was to be avoided at all costs, for the complexity the examples end up being, that could be otherwise easily shared.

That said, we now only support test cases provided in the thread (except in very specific cases and only when Ext.NET requests for a solution or project package for that matters).

I have reviewed your solution and could reduce your test case to this:

Controller:


public issuesController : Controller
{
public ActionResult c61274_imageCutoff()
{
return View();
}
}


Views/issuesController/c61274_imageCutoff.cshtml



@{
var X = this.Html.X();
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.YellowGreenBackground {
background-color: yellowgreen;
}
</style>
</head>
<body>
@X.ResourceManager()

@(X.Viewport()
.Layout(Ext.Net.LayoutType.Border)
.ID("OutlookViewport")
.ItemID("OutlookViewport")
.Items
(
X.Panel()
.Region(Ext.Net.Region.North)
.ID("NexNorthRegion")
.Height(178)
.MinHeight(178)
.Width(500)
.MinWidth(500)
.Border(false)
.Layout(Ext.Net.LayoutType.Fit)
.Items(
X.Container()
.Anchor("100%")
.Cls("YellowGreenBackground")
.Layout(Ext.Net.LayoutType.VBox)
.LayoutConfig(new Ext.Net.VBoxLayoutConfig
{
Align = Ext.Net.VBoxAlign.Stretch
})
.Items(
X.Container()
.Layout(Ext.Net.LayoutType.VBox)
.LayoutConfig(new Ext.Net.VBoxLayoutConfig
{
Align = VBoxAlign.Stretch
})
.Items(
X.Toolbar()
.Cls("TopLinksToolbar"),
X.Container()
.AnchorHorizontal("100%")
.LayoutConfig(new Ext.Net.HBoxLayoutConfig
{
Align = Ext.Net.HBoxAlign.Middle
})
.Items(
X.Image()
.Height(74)
.MarginSpec("5 0 5 5")
.HideMode(Ext.Net.HideMode.Visibility)
.ImageUrl("/Content/Bird.png"),
X.ToolbarFill(),
X.Image()
.Height(74)
.MarginSpec("20 5 0 0")
.ImageUrl("/Content/Reebok.png")
)
)
)
)
, X.Panel()
.Region(Ext.Net.Region.West)
.ID("NexWestRegion")
.Split(true)
.Resizable(false)
.Collapsible(true)
.Collapsed(false)
.Width(200)
.MinWidth(200)
.Layout(Ext.Net.LayoutType.Fit)
, X.Panel()
.Region(Ext.Net.Region.East)
.ID("NexEastRegion")
.HideMode(Ext.Net.HideMode.Display)
.Collapsible(true)
.Split(true)
.Layout(Ext.Net.LayoutType.Fit)
)
)
</body>
</html>


So please let's stick to this standard, as exhausted in the guidelines, when posting test cases, or else we at support will be unable to help you and, even if we can help, odds are against this thread being useful in the future.

Alright, now for the first possible solution: you are specifying a height to the image. If you just specify the image's width now, between lines 66 and 70, you'll get it in place. But you may lose image proportion. As a statically-dimensioned content, I don't think that should be much of a problem.

Well, if that's a problem then just send a stimulus to update the layout after the page has loaded and it should work as much as resizing the page upon load. Something like this should do:



<script>
Ext.onReady(function () {
App.OutlookViewport.updateLayout();
});
</script>


Hope this helps!