CSS Formating Query

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Ewanm
Posts: 111
Joined: Mon Jun 04, 2007 11:09 am
Location: Scotland

CSS Formating Query

Post by Ewanm »

I am using a couple of forms to display data using html rather than using an attribute as I want the data to be Read Only. I have used Type html to display and format my data in the form cell (see below):

<!DOCTYPE html>
<html>
<div style=" border: solid 1px lightgray;
border-radius: 5px;
PADDING: 8px 12px;
width: 600px;
BACKGROUND-COLOR: white;
height: 16px;
TEXT-ALIGN: left; ">
<body>
<<Tickets.ClientName>>
</body>
</html>
</div>

My question is, when I use this method, the data is display correctly in the format I want but the Label is positioned way too high on the form out of alignment with the displayed data. Is there a better way to display the data as read only in the same format as say a normal text attribute and have the Label aligned with the displayed data.
himanshu
Posts: 724
Joined: Thu Jun 19, 2008 6:24 am
Location: India
Contact:

Re: CSS Formating Query

Post by himanshu »

Try to put below code into the html box..
<div style=" border: solid 1px lightgray;
border-radius: 5px; PADDING: 8px 12px; BACKGROUND-COLOR: white;
height: 16px; TEXT-ALIGN: left; "><<Tickets.ClientName>> </div>
Just enable the Label property from the property window.

Let know if that works for you.
From,
Himanshu Jain


AwareIM Consultant (since version 4.0)
OS: Windows 10.0, Mac
DB: MYSQL, MSSQL
Jaymer
Posts: 2475
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: CSS Formating Query

Post by Jaymer »

1) your HTML is malformed
2) FYI _ I've never needed to put
<!DOCTYPE html>
<html>

inside my html fields.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Ewanm
Posts: 111
Joined: Mon Jun 04, 2007 11:09 am
Location: Scotland

Re: CSS Formating Query

Post by Ewanm »

<div style=" border: solid 1px lightgray;
border-radius: 5px; PADDING: 8px 12px; BACKGROUND-COLOR: white;
height: 16px; TEXT-ALIGN: left; "><<Tickets.ClientName>> </div>
Thanks, I have used that format above and get the same results except for the field length. The label property is enabled but I get the label set too high for the field. See below:

Image

The centre of the label and the field do not line up.
himanshu
Posts: 724
Joined: Thu Jun 19, 2008 6:24 am
Location: India
Contact:

Re: CSS Formating Query

Post by himanshu »

Have one more try... it should fix your issue and play with css to make adjustable according to you.
<span style=" border: solid 1px lightgray;
border-radius: 5px; BACKGROUND-COLOR: white;
TEXT-ALIGN: left; padding:2px; "><<Tickets.ClientName>></span>

Cheers
From,
Himanshu Jain


AwareIM Consultant (since version 4.0)
OS: Windows 10.0, Mac
DB: MYSQL, MSSQL
Ewanm
Posts: 111
Joined: Mon Jun 04, 2007 11:09 am
Location: Scotland

Re: CSS Formating Query

Post by Ewanm »

Hi there,

That sorted the alignment problem. Thanks.

I know this is not the correct place to bring up another problem but as you will see below, the cells are overlapping and I am struggling how to change that. I have tried using margins etc in the CSS code but have not had any success. Can you advise.

Image
Ewanm
Posts: 111
Joined: Mon Jun 04, 2007 11:09 am
Location: Scotland

Re: CSS Formating Query

Post by Ewanm »

I have tried margin-top in the CSS above and this appears to have no effect. If I use margin-left, the cell contents move to the right of the form as expected but nothing happens with Margin-top or margin-bottom.

Code: Select all

<span style=" border: solid 1px lightgray; border-radius: 5px; margin-top: 50px; PADDING: 8px 12px; BACKGROUND-COLOR: white; height: 14px; TEXT-ALIGN: left; "><<Tickets.AssignedEngineer>> </span>
pureist
Posts: 427
Joined: Sun Jan 24, 2016 10:00 pm

Re: CSS Formating Query

Post by pureist »

It's a really worthwhile time investment spending a day learning the basics/fundamentals of CSS/HTML:

https://www.w3schools.com/html/html_blocks.asp

Top and bottom Margin and Padding has no effect for Inline elements, only Block elements.

If not already done you should also remove the <body element which is also not needed, along with the <doctype and <html elements previously mentioned.

Span is an Inline element. You can change it to be an inline block element by incorporating 'display: inline-block;'.
Jaymer
Posts: 2475
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: CSS Formating Query

Post by Jaymer »

I’m surprised no one has mentioned this, and I wanted to but I was sure it would come out.
It seems like you’re doing a lot of work to use HTML to make the screen look exactly the way AIM was gonna make the screen look anyway.
All for the sake of it being read-only?
So the READ PROTECT command would be useful, as well as the NO EDIT option (if I remember correctly) to view a form.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply