Image/Photo 'well' in AppGini 5.81

Please report bugs and any annoyances here. Kindly include all possible details: steps to reproduce, expected result, actual result, screenshots, ... etc.
Post Reply
User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-03 22:43

It seems that when creating an image field (or loading an earlier AG file and re-generating) that 'wells' are now created in DV template for the image and upload toolbox.

This is annoying as I don't like the look of wells round images and the toolbox - it would mean I need to write protect all my templates or remove the wells from templates that have images or all my projects when opening/saving them under AG 5.81!

Below is the extracted template html code of my earlier project protected DV template and then the same template when unprotected and regenerated under 5.81:

Earlier Template:

Code: Select all

						<span class="help-block collapse" id="photo-description"><div class="alert alert-info">Maximum file size allowed: 2000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

						<div class="form-control-static"><div class="pull-left">

						<a href="<%%TRANSLATION(ImageFolder)%%><%%VALUE(photo)%%>" data-lightbox="table1_1_dv"><img src="thumbnail.php?i=<%%VALUE(photo)%%>&t=table1_1&f=photo&v=dv" class="img-thumbnail" id="photo-image"></a>
</div>

												<div class="pull-right" style="overflow-x: hidden;">
							<div class="hidden-md hidden-lg vspacer-lg"></div>
							<%%UPLOADFILE(photo)%%>
							<%%REMOVEFILE(photo)%%>
Now generates as below (NOTE inclusion of 'wells')

Code: Select all

						<span class="help-block collapse" id="photo-description"><div class="alert alert-info">Maximum file size allowed: 2000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

						<div class="form-control-static well well-sm"><div class="pull-left">

						<a href="<%%TRANSLATION(ImageFolder)%%><%%VALUE(photo)%%>" data-lightbox="table1_1_dv"><img src="thumbnail.php?i=<%%VALUE(photo)%%>&t=table1_1&f=photo&v=dv" class="img-thumbnail" id="photo-image"></a>
</div>

												<div class="pull-right well upload-toolbox">
							<div class="hidden-md hidden-lg vspacer-lg"></div>
							<%%UPLOADFILE(photo)%%>
							<%%REMOVEFILE(photo)%%>
							<div class="text-bold text-danger file-type-error hidden">
								<%%TRANSLATION(invalid file type)%%>
							</div>
							<div class="text-bold text-danger file-size-error hidden">
								<%%TRANSLATION(file too large)%%>
							</div>
Has this been done in error and will it be bug fixed/reversed or is there a quick fix to add something to remove 'wells' from image + upload toolbox?

Images:
before 5.81.jpg
before 5.81.jpg (20.3 KiB) Viewed 3865 times
Above shows test image before in saved template
now under 5.81.jpg
now under 5.81.jpg (20.75 KiB) Viewed 3865 times
Above shows what result is after vers 5.81

Cheers,
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Image/Photo 'well' in AppGini 5.81

Post by peebee » 2019-11-03 23:42

I haven't actually installed V5.81 yet but as far as I'm aware .well is just Bootstrap css class so I'm guessing you should be able to hide it pretty easily if you want to?

Just add the following css style (or something along these lines depending on your background colour if it isn't white) to your hooks/header-extras.php and I think .well should be gone sitewide:

.well {
background-color: #ffffff;
border: none;
}

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-04 15:50

Hi Peebee - Tried that but could not get it to work (although I thought it would!), only temp fix I could make work was to remove 'well' from html code and then write protect affected DVtemplate files (those with image uploads) to avoid them being over written on later generation of AG DV files.
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Image/Photo 'well' in AppGini 5.81

Post by peebee » 2019-11-04 21:40

Hmm, odd? I just tried it in developer tools on an image in the Appgini Northwind demo (V5.81) and it worked ok?

Did you add the <style> tags? Also try clearing your browser cache? Try this?

<style>
.well {
background-color: #ffffff !important;
border: none !important;
}
</style>

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-05 00:09

It's working now, I did use <style> tags but must have made an error as when cut and pasted your code and cleared browser it worked.
It's a good quick fix, but not long term as I have other 'wells' in the project and on same DV Template that naturally now don't show as 'wells' so am still hoping that 'wells' will be removed from default in V5.81 images.

I changed #ffffff to transparent so it works for other themes / backgrounds etc.

Thanks for your help,
Cheers,
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Image/Photo 'well' in AppGini 5.81

Post by peebee » 2019-11-05 02:02

Sorry, provided the simplest solution I could think of as I was presuming you were wanting to hide ALL instances of .well class app wide. I'm not aware of where, other than images, the .well class has been added in V5.81?

To hide individual elements, you'd just need to add the specific element selector to the <style> override in header-extras.php

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-05 11:19

So far I have only noted that the .well class has been newly applied to images only in v5.81 (image + upload-toolbox).

I can remove well from upload toolbox using specific element selector as you suggest:
<style>
.upload-toolbox {
background-color: transparent;
border: none;
}
</style>

However not sure how to remove it from also the image .well without affecting other .well class in same DV template (i.e. what to use for specific element selector) ?
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-05 12:04

Temp fix sorted: Added below to hooks/header-extras.php

<style>
.form-control-static.well {
background-color: transparent;
border: none;
}
</style>
<style>
.upload-toolbox {
background-color: transparent;
border: none;
}
</style>
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Image/Photo 'well' in AppGini 5.81

Post by ronwill » 2019-11-05 12:18

Alternatively amend your file: dynamic.css.php from around line 215 (adding bold/italic as shown below)

/* file upload box formatting */
.upload-toolbox {
overflow-x: hidden;
max-width: 40rem;
font-size: 1.2rem;
text-align: left;
background-color: transparent;
border-color: transparent;

}
.theme-rtl .upload-toolbox {
text-align: right;
}
.upload-toolbox input[type="file"] {
display: inline-block;
}
.form-control-static.well {
margin-bottom: 0;
background-color: transparent;
border-color: transparent;
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

Post Reply