The constructor is not visible chrome browser.

  1. #1

    The constructor is not visible chrome browser.

    Hi,
    We are created DateTimeControl using EXT DateField, TimePicker Controls It is showing differently on browser, When screen sizes more than 100% the control is not showing google chrome browser. Other browsers ( Mozilla ,Edge, Internet Explorer) control is visible.

    Click image for larger version. 

Name:	screensize.jpg 
Views:	2 
Size:	20.2 KB 
ID:	25233

    Output in chrome, When Screen Size 100%
    Click image for larger version. 

Name:	chrome1.png 
Views:	3 
Size:	10.4 KB 
ID:	25234

    Output in chrome, When Screen Size 125%
    Click image for larger version. 

Name:	chrome2.png 
Views:	3 
Size:	15.0 KB 
ID:	25235

    Code below

    <%@ Register TagPrefix="alc" Namespace="ExtTest1" Assembly="ExtTest1" %>
    
    <html>
    <head runat="server">
    	<title></title>
    </head>
    <body>
    	<form runat="server">
    		<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
    
    		<ext:Panel runat="server" Frame="True" Width="250" MinHeight="100" MarginSpec="5 0 5 5">
    			<LayoutConfig>
    				<ext:VBoxLayoutConfig Align="Stretch" />
    			</LayoutConfig>
    			<Items>
    
    				<alc:DateTimeControl runat="server" ItemID="dtpTest1" MinHeight="45" FieldLabel="Received Date" LabelAlign="Top" />
    				<ext:Panel runat="server" Frame="True" MarginSpec="5 0 5 5" Width="250" MinHeight="100">
    					<LayoutConfig>
    						<ext:VBoxLayoutConfig Align="Stretch" />
    					</LayoutConfig>
    					<Items>
    						<alc:DateTimeControl runat="server" ItemID="dtpTest2" MinHeight="45" FieldLabel="Received Date" LabelAlign="Top" />
    
    					</Items>
    				</ext:Panel>
    			</Items>
    		</ext:Panel>
    	</form>
    
    </body>
    </html>
    --DateTimeControl
    public class DateTimeControl : FieldContainer
    	{
    		private DateField _dateField = new DateField
    		{
    			ItemID = "DataField",
    			Format = "yyyy-MM-dd",
    			SubmitFormat = "yyyy-MM-dd",
    			Flex = 1
    		};
    			   	
    
    		private TimePickerControl _timeField = new TimePickerControl()
    		{
    			ItemID = "TimeField",
    			MarginSpec = "0 0 0 3",
    			Width = 80
    		};
    		
    		protected override void OnInit(EventArgs e)
    		{	
    
    			Items.Add(_dateField);
    			Items.Add(_timeField);
    			LayoutConfig.Add(new HBoxLayoutConfig
    			{
    				Align = HBoxAlign.Stretch
    			});
    
    			MaxHeight = 21;
    
    			base.OnInit(e);
    
    		}
    	}
    --TimePickerControl
    public class TimePickerControl : Container
    	{
    		private TextField _timeField;
    		private ComboBox _timeZoneField;
    
    
    		protected override void OnInit(EventArgs e)
    		{
    			_timeField = new TextField()
    			{				
    				MarginSpec = "0 2 0 0",
    				Width = 38
    			};
    
    			_timeZoneField = new ComboBox
    			{
    				Editable = false,
    				Width = 40,
    				ForceSelection = true,
    				ItemID = "TimeZoneField",
    
    			};
    			
    			var listItem = new ListItem("AM", "AM") { };
    			_timeZoneField.Items.Add(listItem);
    			_timeZoneField.Items.Add(new ListItem("PM", "PM"));
    
    			if (Page.IsPostBack == false)
    				_timeZoneField.SelectedItems.Add(listItem);
    
    
    			Layout = "column";
    			Items.Add(_timeField);
    			Items.Add(_timeZoneField);
    
    			base.OnInit(e);
    
    		}
    	}
    Last edited by shimith; Feb 01, 2019 at 11:31 AM. Reason: simplified code
  2. #2
    Hello @shimith, and welcome to Ext.NET forums!

    Your code sample is way too long for us to even take a look on it, we would rather have a simplified test case before we could review it. Please take your time to review our guidelines for posting new threads and test cases:

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    We also kindly ask you to wrap the code around [code][/code] tags, as it makes it allows indentation and better code formatting output on the thread.

    Notwithstanding, the description you provided alone makes it clear the issue you're facing is related to browser zooming. Unfortunately our underlying framework, Ext JS from Sencha, does not support browser-level zooming and it is expected to break layout no matter what if you rely on browser-level zooming with Ext.NET.

    Unfortunately again, there's little we can do to address this. As far as we understand, this is a design limitation in the underlying Ext JS framework. In some cases it may work, but it is never guaranteed, especially across browsers and different OS.

    Hope you understand.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    simplified the Code

    Hi,
    I just updated my code it is more simplified now.
  4. #4
    Hello again, @shimith!

    I can't reproduce the form field being completely removed with your code:

    http://extnet.github.io/Ext.NET/foru...62597-zoom.gif

    Please keep in mind browser zooming is not really supported by Ext.NET (this is a limitation from the underlying framework, Ext JS from Sencha).

    Even though not supported, some things you may try to avoid the issue of the field completely disappearing would be to adjust the margins and padding of the fields within containers. Add extra space for the contents to have room for the browser zoom's imprecise rounding.

    I've tried with google chrome, as you can see in the animated gif above, so maybe the simplified version you drawn does get rid of the issue and you didn't notice it?

    Well, hope this helps!
    Attached Thumbnails 62597-zoom.jpg  
    Fabrício Murta
    Developer & Support Expert
  5. #5

    Refresh the page

    Hi ,
    can you just refresh the page after zooming , you can see the problem
  6. #6
    Hello @shimith!

    I honestly don't mean to be rude, but I will be short here for the sake of clarity.

    Zooming in Ext JS, the underlying framework on top of Ext.NET, is not supported.

    A quick google search suggests it is not a trivial task to detect page zoom level in all modern browsers.

    Hope you understand.
    Fabrício Murta
    Developer & Support Expert
  7. #7

    Thank you

    okay I understood , Thank you for the support.

Similar Threads

  1. [CLOSED] Image will be cut off under chrome browser
    By u8621011 in forum 4.x Premium Help
    Replies: 4
    Last Post: Mar 01, 2017, 1:02 PM
  2. Replies: 0
    Last Post: Jul 05, 2013, 10:49 AM
  3. Replies: 8
    Last Post: Apr 03, 2013, 4:17 PM
  4. [CLOSED] Ext.Net 1.1 issue in Chrome Browser?
    By ryan.kim in forum 1.x Premium Help
    Replies: 5
    Last Post: Jul 08, 2011, 9:37 PM
  5. Replies: 2
    Last Post: Jun 28, 2011, 6:35 AM

Posting Permissions