CSS hacks for UI design
Hello I have been following your posts regarding the CSS hacks for UI design in Ninox. I was feeling really helpless until a few community members advised about your posts for tweaking the design editor using CSS.
I am trying to design a particular type of Home Screen/Dashboard that I saw in Filemaker. It is a screen that involves Vertical alignment of the buttons (screenshot attached). Following your posts I was able to achieve the result but to a little bit. I also came across one of the posts from @jess_spiers from 2 years ago (https://forum.ninox.com/t/35hrzfd#p8hr035) where he was able to design his screen on the same concept as mine (screenshot attached).
I want to design my dashboard like the one above and show charts on the right side instead of the Table view. The GREEN label on the screen is not aligned properly with other elements ('cuz its label is hidden. It is a formula field).
Can we nudge it down a little bit using CSS to align it vertically with other elements like the text boxes and choice fields etc?
Is it possible in CSS to increase or decrease the size of individual columns in the grid, 'cuz I believe it picks up the largest column and then starts aligning the rest of the elements in that row according to that largest column. That is why when I increase the height of the Space element, the SALES and INVOICES buttons also move down.
Can you please help me with the CSS that will help me design the screen the way I desire.
26 replies
-
Hi
I will look at it today and see what I can do.
-
said:
I want to design my dashboard like the one above and show charts on the right side instead of the Table view.I don't have any experience with charts. If you can add them to your form I'll see what I can do.
said:
I want to design my dashboard like the one above and show charts on the right side instead of the Table view. The GREEN label on the screen is not aligned properly with other elements ('cuz its label is hidden. It is a formula field).
Can we nudge it down a little bit using CSS to align it vertically with other elements like the text boxes and choice fields etc?Yes, that was easy enough. First, add a border to the field using the Style popup for the Formula field. You can make it the same color as the background color and also choose Border style Solid. I added this line of CSS to push it down.
.form .component:nth-child(7) {padding: 28px 8px 8px;}
I'm still looking into using CSS Grid in Ninox's Form view, but it may take a few days.
-
Hi,
Looking for a way to help you copy the original design of the Filemaker Dashboard, I think I can share a first draft of my efforts.
As you can see in the attached database, the implementation is based on just two formula fields, one for the buttons on the left and one for the graphs on the right.
Simple, nice and functional!
What do you think, is it close to what you want?
-
Minor improvements:
- The parent containers of both Charts and Buttons are CSS grids. Now the buttons are perfectly aligned with equal spacing between them.
- More tabs have been added to mimic the original Filemaker template. You can now change the background color of the tabs for a consistent blend.
- The function loadeCharts() is only called once, which improves the loading time of the eCharts js library.
-
Hello friends, I was playing around with CSS a bit (with HTML, BODY and DIV height attributes. I set the Html and Body height to 50% and the entire code and display editor in Ninox literally shrinked to 50%.
My idea was to make the Button sidebar to100%VH (button sidebar covers 100% of the body height), but no matter what I have tried so many things (referred from internet), the Div is not touching the bottom of the Ninox display/editor window. It stays at 50%.
But for sure that Div is being the Child of another element and it is covering 100% height of that element. I can't understand what that parent element of the Div is. Something that lies between the Body and the Div element in hierarchy. In code there is nothing between the Body and Div element, so Div should be a direct child of the Body element.
To understand this I changed the color of the Div element. Screenshot is attached. Can someone please help me understand what this secret element is in the Ninox editor DOM?
Content aside
- 4 mths agoLast active
- 26Replies
- 499Views
-
6
Following