Can you please assist with the approach (CSS ??) for reducing the padding on each DataGrid row. I would like to reduce the white space on each row as it is takes up too much space. I am referring to the row areas marked in red below:
Presumably this will be achieved using CSS and will go in the main.css, I'd like assistance with the CSS markup
Thanks.
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.
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
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>
Can you re-generate blazor bundles with
abp bundle
command?
The CSS file that makes changes to the grid is: blazor-global-styles.css This is in the Blazor project (not Blazor.Client)
abp bundle
is not valid on the Blazor project - only Blazor.Client. I have run this previously (and again now) but it has not effect.
When you run the suggested abp bundle
does it change the cell padding?
Just to recap:
Here is the CSS I have added to blazor-global-styles.css
/* Your Global Styles */ .b-table.table tbody th, .b-table.table tbody td { padding: 0.5rem 0.25rem; background-color: #b6ff00; }
The background-color is just to test that the CSS is being used. And is it. But the padding is not.
Ok, maybe I should explain the reason this is an issue for me.
I would like to have a layout where grids can display more rows than the current 10 using a desktop monitor. For example, compare LeptonX to what DevOps theme is able to acheive. I can get this many rows in DevOps (for example) in the same area that LeptonX can only get 10:
Forms are also an issue where the LeptonX theme has too much padding on all the layers (margins, cards, grids etc). I do not have experience in CSS (that is one of the benefits and reasons for paying $$$ for ABP commercial)
Does anyone have CSS that can improve the LetponX theme by reclaiming all the lost white space?
I have uninstalled and resinstalled both abp suite and the cli to try to solve but there is no change. abp suite remove dotnet tool uninstall -g Volo.Abp.Cli
dotnet tool install -g Volo.Abp.Cli abp suite install