Ive played around a few hours with the css in bootstrap to get the web dialog to horizontally center properly in the browser. Im not having much luck. Can anyone help me out with horizontally centering a web dialog? Thanks in advance.
Are you using the default Bootstrap theme or other?
Is your dialog at fixed position, at left of the screen or at right?
Is the problem on a phone screen or desktop browser too?
Sorry for all the questions, but I see the dialog centered horizontally by default.
What version of Xojo are you using?
Maybe you want to make the dialog centered vertically instead of always be aligned Top?, in other words position Center and Middle instead of Center and Top?
I am using a custom bootstrap theme but it is happening in the default theme also. The dialog is at the left side of the screen. It’s happening only on desktop browser. I don’t have a program that supports phone.
I am using 2023 r3.1. I want the dialog centered horizontally at the top of the browser window.
I can’t replicate it with the default theme.
I will need a sample project to see what is happening.
This is what I see:
Well that’s weird. I just did a test on my machine and got the same results as you… However when I did my theme, I didn’t touch anything with the modals so I don’t know why just adding a different theme would cause it to suddenly stop centering. I guess I will compare the css in chrome for the default theme to what I have now and see how it changed. Thanks for the guidance.
It appears that this code was the missing code that caused my modal dialogs not to center:
.modal {
--bs-modal-margin: 1.75rem;
--bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
Not sure why, but when I take it out, it doesn’t center and when I add it back it centers.