Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook
Devcon 2020 Goes Virtual! LEARN MORE >

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Scaling image in freeform List control

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
    #1

    Scaling image in freeform List control

    Hi all. Not a lot of knowledge of html here, as you can tell, so this will probably be a very easy answer.

    I'm trying to show an image in a freeform list. My original component values / image files are kept in a folder, not base64. HTML, not PG. All CRUD operations work as expected.
    The problem I'm have is not being able to scale the image within the borders of Alpha's device emulator, responsive way. I don't need a thumbnail and showing a scaled original picture is fine for now. Trying to avoid any device or browser special html code, css, extra js code etc. It must be something simple. I'm fine with putting a container around the list, filling the container or not. Or having it in a table html tags. And it's Ok, even desirable, to scale a smaller picture into a larger - not only the other way around. Don't want the image to spill over out of the screen's borders. I can scroll vertically through the list. It works well for long text fields, it probably works for pictures. I just don't know how.

    To illustrate the problem, I'm attaching a simple component with two fields in the list. Static with a Name and link to a jpg. I have the same issue in this sample. Tried variations of width solutions in the div styling, no luck.

    Thanks!
    Sime
    PS AA v4.2 (v12.4.2), build 3670 / sys-addins 4684
    Attached Files
    Tags: None
    #2
    Re: Scaling image in freeform List control

    You're putting the style width setting on the div surrounding the image. This does not filter down into the image.

    Remove the div around the image and set the style width for the img tag itself...

    Code:
    <img style="width:70%;" src="https://lh3.googleusercontent.com/-VuJYohRz1pU/VN_2K1ZgPAI/AAAAAAAADCk/iZOYCyLGM5M/s800-Ic42/autorooper_02.jpg">
    ListImageWidth.PNG

    Comment

      #3
      Re: Scaling image in freeform List control

      Thanks (again) David - that was it!

      I started with the freeform's template:

      <div class="{dialog.style}ListItemLabelMain">{image}</div>

      and didn't think of removing the div around it, as you said:

      <img style="width:70%;" src={image}>

      Comment

        #4
        Re: Scaling image in freeform List control

        You can keep the div if you want... doesn't hurt... doesn't help.

        Comment

          #5
          Re: Scaling image in freeform List control

          I see. I thought the <img> inherits the style from the div.

          Comment

            #6
            Re: Scaling image in freeform List control

            David, I knew there will be a follow-up question.
            Putting the style in the individual <img> worked as advertised in that example.

            What I can't understand now is why it's not working for the {image}, where {image} is a field in the list. The image shows up, but not honoring the width (goes off borders), and displaying extra characters, like the img src syntax is wrong.

            - Does not work:
            <img style="width:70%;" src="{image}" />
            <img style="width:70%;" src="{image}" >
            combinations without quotes, with @ in front of the curly bracket.

            - Works:
            // exactly like the image field in my table
            <img style="width:90%;" src="{images.dialog.listNav}" />

            <img style="width:70%;" src="https://lh3.googleusercontent.com/-VuJYohRz1pU/VN_2K1ZgPAI/AAAAAAAADCk/iZOYCyLGM5M/s800-Ic42/autorooper_02.jpg">

            I tried to use the freeform template, with putting the image in the list's rows - no luck again. Or just plain html in the freeform:
            {image}<br>
            At least in that case I don't see the extra characters (shown in the attachment) as a leftover of wrong syntax.

            I'm Ok with using plain html, html table, img src. Am I off with the syntax?

            Thanks!
            Attached Files

            Comment

              #7
              Re: Scaling image in freeform List control

              Alpha is "processing" the data... which causes an issue sometimes. Get into the Fields tabs of the List Control and change the "image" field, Control type, to RawData.

              Also, use a better, more descriptive, name than "image"... way too dangerous.

              Comment

                #8
                Re: Scaling image in freeform List control

                I haven't even noticed the RawData type.
                It's still using the path and filename, right? Because now I see just the small square picture holder in the list.
                I don't know if I need to adjust anything else when switching from type Image to RawData type?
                I lost the option for "Image file transformation template" now while "Image capture and storage properties" is still there with the untouched correct folder and "<Filename>" as a transformation expression value.
                The Image field is still Varchar 150 in the mysql db and I can see the values stay correct. I thought maybe I need to start with new records/picture storageing under the new storage format but that didn't help.
                PS I know what you mean by not assigning the fieldname Image for Image - got burned in my early days using Foxpro :) Probably other languages too.

                Comment

                  #9
                  Re: Scaling image in freeform List control

                  I feel there's too much information missing here.

                  You're using MySQL, Varchar field for the image URL, and the data in that field is "https://lh3.googleusercontent.com/-V..."

                  There are a thousand properties of the List Control that you get to mix and match without Alpha caring what you do... for the most part.

                  It seems you are using a Detail View on the List in order to see "Image capture and storage properties".

                  You've not said what the List Control Field name Control type was for the Character Image URL field you're accessing.

                  At this point it's all guessing as to what you have and how you're using it. The only way to proceed is for you to provide a sample UX and a sample MySQL table dump. Post a zip file containing those items.

                  Comment

                    #10
                    Re: Scaling image in freeform List control

                    Sorry David - I didn't explain well that I keep the path and the filename in the field, when I said that original component values / image files are kept in a folder, not base64.
                    And, that's right - I'm adding new records/pictures in a detail view, pretty much like in customerList of the photoapp sample.Minus the thumbnails.
                    When I get back to my laptop this weekend, I'll see if I can extract that panel and zip it with the sql data, which is empty now and pics going to c:\temp -like directory.
                    Or, maybe switch back to blob type / base64, if that's easier.
                    Thanks again - I appreciate your help on this!

                    Comment

                      #11
                      Re: Scaling image in freeform List control

                      I think part of the problem is that the testimage UX you posted is using static data with no image data... and your List Layout is using an <img> tag with an image URL... and you refer to using a direct drive, path, and filename for your images.

                      In your posted UX you also have Server-side Actions for Loading and Saving data. If these actions have anything to do with your List Data then it's all set up wrong.
                      The List Control has it's own data binding. Including UX data binding makes a horrible mess of things.

                      I think you need to start over and create a new UX. Have a look at the Alpha Video UXL_V12--11 (Help, Video Finder). The video is: List Control - Working with Images - Data Bound Images.

                      Comment

                        #12
                        Re: Scaling image in freeform List control

                        I'll take a look at the video during the weekend - thanks for the video finder link! I think in order to simplify the testcase, I made a wrong mixture of the two, i.e static and mysql data, along with the data binding. After the video, I'll try to make a simple component, with a list and two fields in the mysql table: - Descript and Imageph. Three, including the auto-incrementing numeric table1_ID key. Imageph C 150 for storing the path c:\temp\images\ , plus the filename. Not a blob base64.
                        Detail view to add records (along with the server side to load primary key and update table) and the list - Column or Freeform. Preferably Freeform.

                        Comment

                          #13
                          Re: Scaling image in freeform List control

                          Unsure what you mean by... "(along with the server side to load primary key and update table)". Load what primary key and update what in which table? Is this something completely separate you're doing from the List and images?

                          Comment

                            #14
                            Re: Scaling image in freeform List control

                            I'm not in front of the a5wcmp now but I thought I'll need to Load primary keys (just the record counter ID) and Update them, in the UX's server side events, I think ondialoginitialize and ondialogvalidate? So the entried synchronization to the mysql table is correct.

                            Comment

                              #15
                              Re: Scaling image in freeform List control

                              The List Control is a fully contained data bound control... you don't need anything outside the List Control to perform CRUD operations on a table. You may be over-thinking the whole process.

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X