CSS styling fun and games.....can anyone point me in the right direction please?

CSS styling fun and games.....can anyone point me in the right direction please?

  

I want to change the table width so that it's central and sort the background out.  At first I tried to change the main placeholder size of the window (which is a layout_popup) but I couldn't find a way to do it.  Then I tried to change all the background to white but there are so many widths to hunt through for the correct one that it's taking ages to do.  Can anyone advise on this please?  I'm running Outsystems 11.  Many thanks.

Hello Sienna,

The Popup should redimension automatically to fit to the content.
This is not much straight forward, as sometimes the content can't size itself correctly (ya, weird... rs)

Anyway, the Popup_Editor placed in the parent has properties for you to set the dimensions of the popup, if necessary. And you can put a container around your content in the popup, and set a minimun width, for example.

Cheers.

Thanks Eduardo!

I used an extra container and played around with the popup_editor inputs.  However I have now reverted back to the default inputs for the popup_editor and have found that it displays the following which is off centre.....?

Hello Sienna,

It seems, for me, that you have css being applied that is messing with the Popup.

Can you point me in the direction of the URL and a User for take a look? You can send in PM.
I'm assuming this is the final project in the online training material.

Also, if you can share the OML of this module (attach here), would be helpful.

In any case, what I would do is to inspect the window in the browser (I usually use chrome of firefox to this), to check wich css is being applied to see who is the responsible for this behavior, and than find this in the application and remove it.

Cheers.

You're a star, thanks!  I'll pm you and take another look at the element (using firefox).

I don't appear to be able to attach the oml here though?

Hi Sienna,

Do you ant something like this?

I noticed that you have margin:10px; for both body and form elements on this page.
If you change it to 0, it will give you that effect.

You can add this to your page StyleSheet:

form, body { margin: 0; }

Cheers.

Yes that's what I'm after, except the bottom margin is a bit bigger than the others.  I had presumed that if the margins were all equal on every side then it would simply resize and keep everything central, but seems that is not the case?  Also where did you set the margins to 0?  I added the code to the page and the main container and it still offsets to the right.

It's let me upload the oml now......I think.....

Sienna, Are you setting the margins in the popup page or in the page where the popup is called? It has to be in the first.

Try to change this in the popup style sheet: 

html, body, div, span, 
a, img,  ul, li, form {
    margin: 10px;
}

to this

html, body, div, span, 
a, img,  ul, li, form {
    margin: 0px;
}

I also want the number of nights to be left aligned.  It is an expression inside a container and even if I explicitly make the expression the same size as the container and set both as left alignment, it doesn't justify to the left at runtime.

I'll try and attach the oml to this message again as previous attempts appear to have failed.....

It was already 0 on the style sheet (it isn't set in the other style sheets, only the London one)?

Solution

Sienna Davids wrote:

It was already 0 on the style sheet (it isn't set in the other style sheets, only the London one)?

It is set in the popup :)

Cheers!


Solution

I had already set this in the popup...

form, body { margin: 0; }

....but required the aforementioned by you worked instead, thank you!

The (hopefully) final issue with this popup is that I seem unable to make the Cancel button left align and the Confirm Check Out right align.  I have both buttons in a container each plus those 2 containers in a third container.  The check out button and its container are both set to right align in the properties area and the 3rd container encapsulating them both is set to fill width.  The other 2 containers are explicitly set to just slightly larger than their respective buttons.  What else do I need to do in order to make the check out button right align whilst keeping the cancel button left align?

Many thanks for your help.  And sorry for all the questions but out of everything I've done to date, surprisingly its the UI that's causing me the most headaches!

Hi Sienna,

For the buttons:

1 container for the whole line (no alignment setting required here).
Two containers that spread the whole parent together (like 6 columns for each, or 4 + 8 columns)
Left Container aligned to left, Right Container aligned to right.
Put the buttons inside.

This should do the trick. :)

Cheers.

P.S: There is also the margin left problem in the Buttons.
Anyway, I would just use a single container with the buttons centralized there.

Sorry maybe I didn't explain it well but I have the setup you're describing already...

1) Cancel button with container both set to a fixed width and left align.

2) Check out button with container both set to a fixed width and right align.

3) A container with its width set to fill the line that both contains both (1) and (2) above and left align.

Or am I missing something?

(FYI: I've fixed the margin left problem for the buttons.)

The two internal containers, together, must occupie all the space of the parent container.
So, the with of both, together, must fill 100% of the parent. As the parent have 12 columns, you have to set the width of the internal containers that summed give you 12 columsn. So, for example, 4 colums for one and 8 for the other, instead of the "slightly larger" that you used :)

Ah I see.  But how do I know how wide the outer container will be if it is set to 'fill' as it will set dynamically?  And if I set the check out button container to fill for example, it defaults to go on a separate line to the cancel button.  Do I need to read the outer container width at runtime and reset the widths of the button containers dynamically?

Depending on the Grid used, will vary. I'm assuming you are using a FLUID grid (property of the Theme), , in this case, it will have 12 columns. But even if it is a FIXED grid, as the buttons will be in a line that occupies the whole page, you can also assume it is 12 columns (in this case will be related to the page).

So, 5 + 7, 4 + 8 or 6 + 6 will to the trick :)

I set the cancel button container to 4 col and the check out container to 8 col with the outer container set to fill and this is the result....

Sienna Davids wrote:

I set the cancel button container to 4 col and the check out container to 8 col with the outer container set to fill and this is the result....

Can I see your oml?
Could you attach it here, please? :)


Attaching it here....

Thanks!

Hi Sienna,

Just change the width of the right Container to 7 columns. For some reason, your page has 11 columns, not 12 columns... As you are using the FIXED grid, the reference is the page, not the parent.

To the right button to stay right aligned, change the align property of the container where it is to right.

I think this will fix it.

Cheers.

It didn't work and I tried reducing the columns all the way down to 2 and 3 columns and it still didn't work (put them on separate lines with one left aligned and the other right aligned).