1. Home
  2. Forum
  3. Blazor
  4. How to make synfusion control as responsive

How to make synfusion control as responsive

I have used syncfussion control (textbox, date, combobox,grid etc)  in data entry application.I would like to know how to make this control as responsive which should be professional look in desktop and mobile

16 Replies 1 reply marked as answer
MK Muthukumar Kannan Syncfusion Team June 2, 2021 03:06 PM UTC

Hi Ismail, 

Thanks for contacting Syncfusion support. 

We would like to let you know that our Syncfusion components are having responsive with desktop and mobile. Please refer this FAQ for your references.  


However, we have attached sample for that for your reference. Could you please check it from below? 

Desktop: 

 

Mobile: 

 


Please get back to us if you have any queries. 

Regards, 
Muthukumar K 


Marked as answer
KI KINS June 2, 2021 04:13 PM UTC

Thanks...

How can I define Syncfusion control as split into 12 columns.

For example:-

I have 9 control and I would like to split into 12 columns

MK Muthukumar Kannan Syncfusion Team June 4, 2021 01:05 PM UTC

Hi Ismail, 

Thanks for your update. 

Based on your query, we suspect that you want to place the Syncfusion controls in different columns. According to that, we have prepared the sample with Syncfusion Input controls along with bootstrap grid layout. This helps to split the controls in different columns as we want. 

 

We have achieved the requirement and attached the sample for your reference below. 


Also, we suggest you refer our dashboard layout control for splitting the controls within the panels. Please refer the below UG and Demo for your further references. 



Please get back to us whether we addressed your exact requirement or not. 

Regards, 
Muthukumar K 


KI KINS July 20, 2021 05:16 AM UTC

sorry for late reply...


my exact requirement is in below link which is responsive for both mobile and desktop

https://www.syncfusion.com/support/directtrac/incidents/newincident


please provide me example code


MK Muthukumar Kannan Syncfusion Team July 21, 2021 02:52 PM UTC

Hi Hassan, 

Thanks for sharing the information.  

As per your shared information, we will validate your requirement and prepare the workaround for that. However, we will update the further details and information regarding this within 2 business days. Until then we appreciate your patience.  

Please get back to us if you have any queries. 

Regards, 
Muthukumar K 


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 23, 2021 10:00 AM UTC

Hi Hassan, 

Sorry for the delay. 

We have validated your query and would like to let you know that the sample provided is responsive for both desktop site and mobile site. For more information, please refer below images and sample for your requirement: 


Desktop mode: 

 

Mobile mode: 

 

Could you please check with the above information. If you still face the problem, please share the below details: 
  1. By using which controls the issue is faced?
  2. In which mode the issue is faced whether in desktop mode or mobile mode?
  3. Share the image reference of current and expected output.

The above details will help us to provide the solution at earliest. 

Regards, 
Joshna L 
 


KI KINS July 24, 2021 02:23 PM UTC

I have attached my source code in below link.

I am facing an (div layout rows and columns) issue in material theme but its working in bootstrap theme

https://www.dropbox.com/s/lg8r5r8png2mxn3/Coding.zip?dl=0


Note:-

  1. I have attached "Working" source Code with working image.
  2. working razor file "DataEntry.razor" is in "working source code folder"
  3. I have attached "Not Working" source code with Image.
  4. Not working razor file "SampleStyleEdit.razor" is in "not working source code folder".
  5. Is there any issue in index.html ???

Please help,it's my top most urgent...




JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 26, 2021 02:19 PM UTC

Hi Hassan, 

Thanks for your update. 

We have validated your query with your shared information. We want to let you know that the sample which you have provided is responsive in both bootstrap and material themes in desktop and mobile site. Please refer to the below images for the same which took in material theme. 

Desktop site: 
 

Mobile mode: 
 

If the problem still persists, please share the below details 

  1. Is the issue occurring in all the browsers or any specific browser
  2. Share the images or video reference of the issue occurring

The above details will be helpful to validate the problem at our end. 

Regards, 
Joshna L 


KI KINS July 26, 2021 02:57 PM UTC

Did you check my index.html ??

Also please download my all css which is related to index.html from below  thread


https://www.syncfusion.com/forums/167396/how-to-place-button-in-card-header-as-right-side


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 27, 2021 12:46 PM UTC

Hi Hassan, 

Thanks for your update. 

We have checked your reported issue with your shared information at our end. We have checked your index.html file in your shared sample and got the CSS file from your referred thread and checked, but we couldn’t face any problem in the responsiveness of the application. For your reference we have recorded video, please find the video and sample from below links. 
 
 
If still the problem persists, please share the below details 
  1. Share the video/image reference of the issue replicated
  2. Replicate the issue in above sample
  3. Share the replication steps if any
 
The above details will help us to provide the solution at the earliest. 
 
Regards, 
Joshna L 


KI KINS July 27, 2021 01:12 PM UTC

please check my exact requirement in below link


https://www.screencast.com/t/rwhGRSUCWB



JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 28, 2021 06:28 AM UTC

Hi Hassan, 

Thanks for your update. 

We have checked the video reference which you have attached. We let you know that the material theme from syncfusion which you have added is for our controls, the bootstrap theme which you want to remove is the default theme which might occur the styling issue in whole application. And that default bootstrap is mandatory in the application, for rendering our controls properly since those controls have been used inside HTML elements with bootstrap classes. So please add the default bootstrap along with our Syncfusion theme file. 
 
 
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 
         <SfTextBox Placeholder='Sample StyleNo'></SfTextBox> 
</div> 
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 
          <SfComboBox TValue="string" TItem="ReferenceDetailsSetup" Placeholder="Product"></SfComboBox> 
</div> 
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 
           <SfComboBox TValue="string" TItem="SampleData" Placeholder="Buyer"></SfComboBox> 
</div> 
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 
           <SfComboBox TValue="string" TItem="ReferenceDetailsSetup" Placeholder="Gender"></SfComboBox> 
</div> 

Please get back to us if you need further assistance. 

Regards, 
Joshna L 


KI KINS July 28, 2021 06:56 AM UTC

thanks for reply..


can you make as  Syncfusion theme (material as default) and provide me example for above code..


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 29, 2021 10:01 AM UTC

Hi Hassan, 

Thanks for your update 

We have validated your query for “adding material as default theme” at our end. This can be achieved by adding custom class and custom styling for that class. We have added custom class instead of bootstrap class and styling to that class. Similarly, if you need to add styles without using bootstrap, you can add custom class and styling. 

<div class="sample"> 
       <SfTextBox Placeholder='Sample StyleNo'></SfTextBox> 
</div> 
<div class="sample"> 
        <SfComboBox TValue="string" TItem="ReferenceDetailsSetup" Placeholder="Product"></SfComboBox> 
</div>        
<div class="sample"> 
        <SfComboBox TValue="string" TItem="ReferenceDetailsSetup" Placeholder="Gender"></SfComboBox> 
</div> 
 
<style> 
    .sample{ 
        display: inline-table; 
        width:300px; 
    } 
 
</style> 

We have modified the sample for your reference, which you can be downloaded from the below link. 


 
 

Please try with the above sample and get back to us if you need further assistance. 

Regards, 
Joshna L 


KI KINS July 29, 2021 10:42 AM UTC

Thanks..

Can we do this 12 colum split like in bootstrap??

As per above css we can not fix width as 300px


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 30, 2021 06:32 AM UTC

Hi Hassan, 

Thanks for your update. 

We would like to let you know that to achieve the exact styling like bootstrap without referring bootstrap theme, we need to add the required style to achieve that layout in a separate CSS file which might be a huge and time-taking process for both desktop and mobile devices. So, we would suggest you to use the bootstrap to achieve styling or else you can write a separate CSS file to meet your requirement by referring the below links. 


Regards, 
Joshna L 


Loader.
Up arrow icon