1. Home
  2. Forum
  3. Blazor
  4. Gantt Chart 100% width not working correctly

Gantt Chart 100% width not working correctly

I am having problem with the Gantt chart when I set it to 100¤ width. When set to 100% the width becomes bigger than the width of the parent container.

The easiest way to reproduce this error is to create a new WebAssemlby project in visual studio with the and use the default template. Then change the index.razor page to the code below (taken from the Getting started part from your gantt chart documentation page).

As you can see the Gantt is configured to 100% but that messes up the layout of the default template from Visual Studio since it makes the content section of the layout grow to more than 100%.

I only get this problem with the Gantt control, the Grid controll works fine with 100%.

I have also attached my example project that shows this problem.


--------------------------------------------------------------------------------

@using Syncfusion.Blazor.Gantt

<SfGantt DataSource="@TaskCollection" Width="100%">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
    </GanttTaskFields>
</SfGantt>

@code{
    public List<TaskData> TaskCollection { get; set; }
    protected override void OnInitialized()
    {
        this.TaskCollection = GetTaskCollection();
    }

    public class TaskData
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Duration { get; set; }
        public int Progress { get; set; }
        public List<TaskData> SubTasks { get; set; }
    }

    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>() {
    new TaskData() {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = (new List <TaskData> () {
            new TaskData() {
                TaskId = 2,
                TaskName = "Identify Site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "4",
                Progress = 50,
            },
            new TaskData() {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "4",
                Progress = 50,
            }
        })
    }
};

        return Tasks;
    }
}

-------------------------------------------------------------

Attachment: GanttWidthProblem_691ce3c4.zip

14 Replies 1 reply marked as answer
MS Monisha Sivanthilingam Syncfusion Team March 18, 2021 01:18 PM UTC

Hi Thomas, 
 
Thank you for contacting Syncfusion support. 
 
We analyzed your query, however, we were unable to replicate the issue you reported. We prepared a new web assembly project with default template and set the width of the Gantt Chart as 100%. However, for us, the Gantt rendered in accordance with its parent element’s width. Please refer the screenshot below. 
 
            
 
You can see that the Gantt Chart was rendered within the boundaries of its parent element. We also tried reducing the width of the parent container in order to replicate the issue, however, we were unable to replicate the issue you reported. 
 
We have attached the sample we used to validate this issue below. Please modify it to replicate your issue. 
 
 
Regards, 
Monisha. 
 


TH Thomas March 18, 2021 03:04 PM UTC

Tanks for you answer.

I have tried the sampel you included and are able to reproduce it without making any modification.

If the browser windows is very wide (more than ca 2500px) then it looks good, but if you resize the browser windows to ca 1400px it will look as in the picture below. As you can see the gantt controll has a width of 2272 even when the browser windows is much smaller. If I put width to 100% of the parent div tthat does not help, the gantt control still are to big. If I remove the gantt controll then the 100% width of the parent div works correctly.

I am not sure why it behaves like this, but when you include the gantt it breaks the 100% width of the parent if the browser windows is smaller than ca 2500px.



PP Pooja Priya Krishna Moorthy Syncfusion Team March 22, 2021 04:12 PM UTC

Hi Thomas, 
We are able to replicate the reported problem. This issue wont arise in our latest version. 
You can upgrade the packages and check once the Volume 1, 2021 main release has been rolled out. It is expected to be roll out at the end of this month. 
We will intimate you once it has been rolled out. Until then we appreciate your patience. 
 
Regards, 
Pooja K.

TH Thomas March 22, 2021 04:14 PM UTC

Great, then I am looking forward to that release even more!

MS Monisha Sivanthilingam Syncfusion Team March 23, 2021 04:53 AM UTC

Hi Thomas, 
 
You are welcome. 
 
We will intimate you once the release has been rolled out. 
 
We appreciate your patience until then. 
 
Regards, 
Monisha. 


TH Thomas April 5, 2021 06:25 PM UTC

I have now tried with version 2021.1 but still 100% width is not working. 

The behavior is not the same but still not OK.

When the page is loaded it fills 100% of the parent width correctly, but when the browser window is resized the gantt controll never changes width,


So 100% width works correctly when inititaed, but not when the window is resized.

I have modified sample project so it works with version 2021.1

Thomas

Attachment: BlazorApp1_a8dde4d4.zip

MS Monisha Sivanthilingam Syncfusion Team April 6, 2021 12:17 PM UTC

Hi Thomas, 
 
We regret the inconvenience caused. 
 
We were able to replicate the issue you reported. Currently, we do not have render Gantt in percentage value on window resize. However, we have already logged a feedback for this support. You can track its status from the below link. 
 
 
However, as we have already lined up some major features, we could not implement this support immediately. We will implement this and include it in any of our upcoming releases. Please cast your vote on this feature based on the customer demand we will prioritize the features in our upcoming road map. 
 
Regards, 
Monisha. 


TH Thomas April 6, 2021 12:54 PM UTC

Thansk for you answer, but in versions before 2021.1 width 100% worked with resize of the window. This thread has been about using 100% width the whole time so it feel strange that you now say that it is not suppored??

And I also have to say that a control that cant have 100% width is kind of useless. I urge you to fix this bug as soon as possible.

Thomas

MS Monisha Sivanthilingam Syncfusion Team April 7, 2021 10:52 AM UTC

Hi Thomas, 
 
As we moved our Gantt component to native approach(i.e. minimal usage of Java script in the area of data operation, event handling in background), some of the methods and properties have been missed those will be resolve by upcoming releases. We logged a bug report for the reported error. The status can be tracked from below feedback link. 
 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


Marked as answer
SK Steve Kay March 2, 2022 07:59 PM UTC

I followed the guidelines here: https://blazor.syncfusion.com/documentation/gantt-chart/scrolling

and that worked for me :)


AK Alagumeena Kalaiselvan Syncfusion Team March 3, 2022 11:51 AM UTC

Hi Steve, 

Thanks for the update. 

We are happy that your issue has been resolved at your end. Please get back to us, if you need further assistance. 

Regards 
Alagumeena.K 


AK Alagumeena Kalaiselvan Syncfusion Team March 3, 2022 11:55 AM UTC

Hi Thomas, 

We are glad to announce that the feature “Provide support to render gantt in percentage values on window resize” has been implemented and included in our Essential Studio 2021 Volume 3 release v19.3.0.43 and is available for download under the following link. 


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance 

Regards 
Alagumeena.K 


SK Steve Kay March 3, 2022 07:13 PM UTC

v19.4.0.53 was giving me the issue - hence why I needed the workaround - so if this was fixed in v19.3.0.43 then either it didn't work or the fix has been undone in the latest version 


AK Alagumeena Kalaiselvan Syncfusion Team March 4, 2022 12:43 PM UTC

Hi Steve, 

We have checked your query and we couldn’t notice any responsive related issues with version 19.4.0.53. We suspect you have rendered Gantt to a parent container without static width and so Gantt would have considered in respect to entire document width. To make gantt responsive to the parent container, kindly ensure that the parent container has static width either in pixel or ‘vw’. Please refer following document for more details 

If still you are facing issue, kindly share the below details, if we misunderstood your query  
  • Share the issue replication steps in detail
  • Share the issue replicated sample code
  • Replicate issue in shared sample, if possible
Regards 
Alagumeena.K 


Loader.
Up arrow icon