Layout - from mockup to Outsystems screen

Layout - from mockup to Outsystems screen

  

Hi,

Given a mockup that looks like 

where the middle section contains two columns (with the fotographs) that holds records from an entity... what is the best approach to do this in Outsystems. I thought of dividing the screen in containers and work from there, but wonder f.ex. how I can show the records (webblocks?) and pagination, show the rounded edges of the background/buttons on the right lower edge... The assignment I got is that it should look exactly the same (otherwise I would have skipped the rounded edges  

Any insights how to approach this, or reading material (forum/courses) etc. would be appreciated.

Regards, Harry 

Hello Harry,

I usually use containers to set up the organisation in the page. You can also create web blocks to create sections, if they will be used in more than one place.

About styling: CSS

Cheers,

Eduardo Jauch

Hi Harry,


You can use templates and patterns from Silk UI Framework. Take a look here.

Thank you Eduardo and Nuno,


Got me into reading.I offcourse encounter some theings I don't know how to hadle it. I have a container with two containers in it (an image and a text to the right) I want the text container to have the same height as the image in a way that if the image height changes the textcontainer changes too. How to achive this?

I thought I could use the Min-height property (min-height = image.height) but yu cannot do that (only accepts values in px etc. 

Regards, Harry. 


Alas, the image is not shown correct. Think of a text container benath the image to the right.

Harry

Hi Harry,

If the outer container has a fixed width, and the two inner containers are vertically aligned (there's a Silk UI pattern for that), it will look like you have on your image, no? 

Hey Herry,


This design can easily be converted in out-systems the only thing you need to know is CSS that's IT,

If you are using P10 then you just need to use column Structure to divide the screen .Follow the below steps for Structure.

Step-1- For outer container take a column structure small right column

Step2- for middle part add one more structure column with 2 equal column and put the container inside it. and apply your styles. and apply style 

  1. border: 1px solid #ddd;
  2. border-bottom-right-radius\: 100px;

to achieve the rounded borders.


Try if you will not able to do that I will help you to convert this mockup to out systems. please let me know.



Regards,

Pankaj Pant

 


Hi Harry,

ONE possibility (there are others, including using JavaScript, as I have used recently), SilkUI patterns, etc, is to use the CSS3 display:table and display:table-cell.

.row {
    display: table;
}
.item {
    display: table-cell;
}

This will make the "cells" (item class) to have the same height, all of them. This approach is used, for example, in the Table Records widget.

What you will use depends on what you wants to achieve.

Cheers,
Eduardo Jauch

Harry de Boer wrote:

Thank you Eduardo and Nuno,


Got me into reading.I offcourse encounter some theings I don't know how to hadle it. I have a container with two containers in it (an image and a text to the right) I want the text container to have the same height as the image in a way that if the image height changes the textcontainer changes too. How to achive this?

I thought I could use the Min-height property (min-height = image.height) but yu cannot do that (only accepts values in px etc. 

Regards, Harry. 


For that, we have css3 property flex.


Regards,

Pankaj Pant


Thank you all for responding.

After reading your posts I reliased that I had to do more CSS reading. I have not tried SILK yet, but with a little css (within styles and one class so far) used in containers I seem to be getting somewhere. 

Regards, Harry

Mmmm there's defintly something weird going on if you embed images in the text. It looks fine before posting, but after posting the image is cut off on the right side.

Strange... image attached now. 

Regards, Harry