Irritating text box width/wrapping

  • 0
  • 1
  • Question
  • Updated 9 months ago
  • In Progress
This is driving me nuts:

Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
  • Irritated

Posted 10 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
I am sure there is a solution but there isn't enough information.

Are you seeing this behavior across the board or on a particular page or after a new release?

 More context is needed including full page and URL to debug.

Generally reports expand with a horizontal scrollbar to accommodate wide headers or column data.

To me a solution would be very easy to implement with script but the issue is do you want a fix for one particular case or a solution for all cases. Generally QuickBase tables are well laid out so a fix for a particular case may lead to a whack-a-mole scenario where the fix to the instant problem generates a problem elsewhere.
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
So this happens all across my form (with 180 fields).  It changes based on screen size, the browser zoom, the fields surrounding it, different field types,  and for any other apparent reason that i don't know about. 

I just don't understand the logic behind quickbase's algorithm for resizing and lining up fields - Surely they can make it easier.  The view is different for view/print/edit modes as well - Why???  
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
Actually I am working in Haskell on project having nothing to do with QB.
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
It seems the solution is slightly more complicated than i imagined.  Is there any way this solution can be broken into a few steps so it can be implemented by a layman such as myself?  Also, does this affect the print view as well?
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
It seems the solution is slightly more complicated than i imagined.  Is there any way this solution can be broken into a few steps so it can be implemented by a layman such as myself?  Also, does this affect the print view as well?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
Joshua is working this issue with some help from me off-world so to convince you it is doable with laymen instructions I will let him report his results.

The solution would not apply directly to the printed version but could be made to with a little study. 
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
Hi Geoffrey,

Let me know how you go with this:

1.       Setup app variables for [IOL] and [/IOL]

a.       Go to main app settings

b.       Click on variables:


c.       Create a new variable called: iol

d.       Paste: 

<img qbu='module' src='/i/clear2x2.gif' onload="javascript:
if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'
?a=dbpage&pagename=

e.       Create a new variable called: /iol

f.        Paste: 

&rand='+new Date().getTime())};">

2.       Setup a new code page for your app and call it module.js

a.       Go to main app page

b.       Click:


c.       Create new page called: module.js and just save for now

3.       Create a new field called IOL in the table you want to reformat fields, make the type formula – Rich Text:

a.       Add the field to the form

b.       I suggest ticking “Use Alternate Label Text” and not inputting anything so it looks like a blank line

c.       Under properties, in formula add: 

[iol] & "module.js" & [/iol]

d.       Untick searchable and reportable boxes.

4.       Go to the page where you have fields wrapped i.e see below:


5.       In chrome press F12 to open Dev tools and go to the elements tab

6.       Press Ctrl + F to open find – type tdf, it will take you to the first mention of this, as you highlight or hover over each one you will see fields highlight in your form example below:


7.       Once you find the field read what td id it has i.e the one above has the id tdf_1

8.       In your code page called module.js paste the below text:

(function(){
 
  $("img[qbu=module]").hide();
 
 
  var querystring=document.location.search;
  if (/dlta=mog/i.test(querystring)) {
    //GRID EDIT PAGE ========================================
    alert("You are on the Grid Edit Page");
  } else if(/a=er/i.test(querystring)) {
    //EDIT RECORD PAGE ========================================
    alert("You are on the Edit Record Page");
  } else if (/a=API_GenAddRecordForm/i.test(querystring)) {
    //API_GenAddRecordForm PAGE ========================================
    alert("You are on the GenAddRecordForm Page!");
  } else if (/a=GenNewRecord/i.test(querystring)) {
    //ADD RECORD PAGE ========================================
    alert("You are on the Add Record Page");
  } else if (/a=nwr/i.test(querystring)) {
    //ADD RECORD PAGE ========================================
    alert("You are on the Add Record Page");
  } else if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE
    alert("You are on the Display Record Page");
    $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");
  } else if(/a=q/i.test(querystring)) {
    //REPORT PAGE ========================================
    alert("You are on the Report Listing Page");
  } else if(/a=td/i.test(querystring)) {
    //TABLE DASHBOARD PAGE ========================================
    alert("You are on the Table Dashboard Page");
  } else if (/a=FinishEditRecord/i.test(querystring)) {
    //FINISH EDIT RECORD PAGE ========================================
    alert("You are on the Finish Edit Record Page");
  } else if (/a=API_GenAddRecordForm/i.test(querystring)) {
    //API_GenAddRecordForm ========================================
    alert("You are on the API_GenAddRecordForm Page"); 
  } else {
    //OTHER PAGE ========================================
    alert("You are on the Some Other Page");
  }
})();

9.       Now for each field, you want to update add the below text updating the tdf_ with the field number you have. Paste one for each change you wish to make as this only effects 1 element at a time, for the sake of simplicity I won't attempt to show you QuerySelectorAll and how to set an array of elements but you could google and work out yourself later.

document.getElementById("tdf_1").style.whiteSpace = "nowrap";

10. Identify what type of view is affected, if it's all you can just paste this under the second line or in fact don’t paste any of the above large script as it will be overkill and just paste the above code line(s) into the module.js. If formatting is only needed for instance on edit paste the above code line(s) in a new row under //EDIT RECORD PAGE =============, if you need in other views do the same and save. Now go to your page, you should get an alert box telling you what type of page you are on – if so you should also see the formatting change. With that success, you can go and remove all references to alert – i.e. delete all lines with: alert(“text here”);
(Edited)