CSS for Blazorise Data Grid #7352

8 risposte

• 

  0

  Anjali_Musmade creato 9 giorni fa

  Team di supporto Support Team Member

  Hello,

  Could you please provide steps to reproduce or any code snippet you use for grid?

  Thanks

  Salva Annulla
• 

  0

  cellero creato 9 giorni fa

  This is the default layout of a new project generated using ABP Suite - Blazor Web App 8.2.... This is not a new issue. It is the default behavior of the Blazorise DataGrid.

  You can reproduce this by creating a new Blazor project (any flavor of Blazor)

  I want to reduce the padding on each row.

  Thanks.

  Salva Annulla
• 

  0

  Anjali_Musmade creato 8 giorni fa

  Team di supporto Support Team Member

  Hello,

  You may set padding in blazor-bundle.css file in the class

  .b-table.table tbody th, .b-table.table tbody td {
    padding: 1rem 1.25rem !important;
    vertical-align: middle;
  }
  

  You can download LeaptonX source code and check for the code

  Thanks

  Salva Annulla
• 

  0

  cellero creato 7 giorni fa

  Hello, The blazor-bundle.css file is not part of the project. It only exists in the build output: So, I can't change it there, right?

  Can you please advise what project css file I can apply the suggested change.

  I have tried several in the Blazor and Blazor.Client + running the abp bundle command for the Blazor.Client.

  I don't want to download the LeptonX source

  Salva Annulla
• 

  0

  Anjali_Musmade creato 7 giorni fa

  Team di supporto Support Team Member

  Hello,

  You can create a custom css file under the wwwroot folder and add that custom css file to BundleContributor.

  Please refer to this similar issue for adding custom css files https://support.abp.io/QA/Questions/5193/How-to-add-custom-CSS-files-in-solution-and-render-them or you may refer to this doc https://docs.abp.io/en/abp/latest/UI/Blazor/Global-Scripts-Styles

  thanks

  Salva Annulla
• 

  0

  brauerj@gc.adventist.org creato 6 giorni fa

  You may set padding in blazor-bundle.css file in the class

  .b-table.table tbody th, .b-table.table tbody td { 
    padding: 1rem 1.25rem !important; 
    vertical-align: middle; 
  } 
  

  But this changes it for the whole site! According to Blazorise we should be able to just do a custom class https://github.com/Megabit/Blazorise/discussions/2760

  .ise-grid-tight tbody tr td {
      padding: .25rem; !important;
  }
  

  but this does NOT work because the LeptonX code overrides it!

  

  Why does blazor-bundle.css have the !important on that line?! That seems like the problem.

  Jonathan

  Salva Annulla
• 

  0

  brauerj@gc.adventist.org creato 6 giorni fa

  Please let us know if this will be something you can fix or if we need to hack a work around somehow. If you have a hackable work around for now please suggest. The main issue seems to be that /_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/blazor-bundle.css is not easily overridable and that its definition of b-table includes plenty of !important statements which are difficult to override.

  Salva Annulla
• 

  0

  cellero creato 5 giorni fa

  Ok thanks, but still no luck on the grid padding I can make changes in blazor-global-styles.css and they are reflected in the UI.

  For example, in the following css I used the background-color to test if the css is getting through and it does. But the padding change has not effect:

  What is happening is that the custom padding css is superseded by blazor-bundle.css:

  Please assist.

  <br>

  Salva Annulla