View in #ohif on Slack
@Nathanial_Bergan: I am creating a custom panel in the OHIF application. I have already created a custom mode and extension. I would like to expand the width of this panel. Can someone help figure out where I should make this change?
@Alireza_Sedghi: I think you should customize the layout, there is something called expandedWidth i guess
it is ugly
but we will make the sides draggable in future
@Nathanial_Bergan: Thank you for quick response!
It looks like I found the expandedWidth code in two locations.
- \myserver\Viewers\platform\ui\src\components\SidePanel\SidePanel.tsx
- \myserver\Viewers\platform\ui\src\components\LegacySidePanel\LegacySidePanel.tsx
Would you suggest modifying these directly? Or is there a proper way to do a custom layout?
@Alireza_Sedghi: Use side panel not legacy
i guess better way is to css select it
@Nathanial_Bergan: @Alireza_Sedghi So I am still struggling a bit. In the LegacySidePanel I can find there is a width number “248px”. But I don’t see this number in the SidePanel code. So I am not exactly sure where to make the change.
Can you help me understand what you mean by “CSS Select” it? I know with normal CSS you can select a web element by either class or id. But the panels do not seem to have any id. Also if I try to select by class, both the right panel and left panel have the same set of classes. So that doesn’t seem to work well.
If I was going to modify the CSS, which file should I do that in? My custom extension or some other file?
I was wrong. It appears they do not have the same class.
The right panel has the class ml-1
The left panel has the class mr-1
The “R” and the “L” seem flip-flopped from what you would expect.