Discussions

Expand all | Collapse all

Irritating text box width/wrapping

Geoffrey Geoffrey02-01-2018 09:56

  • 1.  Irritating text box width/wrapping

    Bronze
    Contributor
    Posted 02-01-2018 09:56
    This is driving me nuts:



  • 2.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-01-2018 11:26
    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.


  • 3.  RE: Irritating text box width/wrapping

    Bronze
    Contributor
    Posted 02-01-2018 11:40
    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???  


  • 4.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-01-2018 11:46
    It is not a simple problem to get acceptable display under all conditions. I am sure there is a solution for any particular case but you will have to direct you question to support for a general solution or some levers you could pull to control the width.


  • 5.  RE: Irritating text box width/wrapping

    Posted 02-18-2018 09:50
    I also find this irritating, i was going to ask support at some point but so far honestly support has been a waste of time as there answer for 95% of things is, it can be done with scripting, we encourage you to talk with one of our partners etc.... 


  • 6.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-18-2018 10:17
    > it can be done with scripting

    I was in a dead sleep but my robot caught this message and woke me up.

    I would have to see an instance of this to debug. It might be as simple as injecting a single CSS: property:

    white-space: nowrap;


  • 7.  RE: Irritating text box width/wrapping

    Posted 02-18-2018 10:21
    i like this robot of yours.... below are 2 fields where this happens. this happens alot more but 2 examples from the same tab (i have no wrapping set everywhere i can see)


  • 8.  RE: Irritating text box width/wrapping

    Posted 02-18-2018 11:03
    Upon your suggestion I have looked at the element ID for the status response, identifies as "tdf_0", in console I have set per below and was successfully applied:

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

    now shows as:
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1705119/RackMultipart20180218-79334-170kj1d-image_inline.png?1518951747">
    Can you please help me out with what I need to do in IOL to get this to occur when the form is opened?, do I just need to write it under the if the form is DR then the code above etc?

    Once we have the solution I will go through and get the element Id's for all the fields affected and set them accordingly - even better Quickbase should do this by default....


  • 9.  RE: Irritating text box width/wrapping

    Posted 02-18-2018 11:21
    I add this to module.js on its own and it has worked, good enough for tonight - moving on for now. Will need to look at an easier way of just setting all elements to no wrap regardless of page type...

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


  • 10.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-18-2018 11:32
    You are starting in the correct place - the dev tools console. All my work starts in the dev tools to figure out what needs to be changed and I use every shortcut and trick imaginable to do it as fast as possible. In the console you can
    1. inspect Elements (Elements tab)
    2. edit Sources , run Snipptes, set Local Overrides (Sources tab)
    3. execute JavaScript (Console Tab)
    4. Inspect Network traffic (Network tab)
    5. interrogate Service Workers and, examine Storage (Application tab)
    Once you get the key code working in the console you can package it in one of the injections techniques say IOL in your case. There are a dozen different ways to write the code depending on your objectives and familiarity. But before I get to the code be advised that when dealing with CSS it is often a game of wack-a-mole where a change in one place might produce an effect somewhere else.

    Here is one way to change all <td>'s that have an id that starts with "tdf" to have have the nowrap attribute:
    $("td[id^=tdf]").css("whiteSpace", "nowrap");
    This jQuer code just changes two specific tds:
    $("td#tdf_0, td#tdf_1").css("whiteSpace", "nowrap");
    I didn't actually test this code because I am again fast asleep but you will quickly get the hang of it after poking around in the console.

    To package the code for IOL you have to take the essential code you developed in the console and wrap it in the generic module.js code:
    (function(){
      //$("img[qbu=module]").remove();
      //$("img[qbu=module]").hide();
      var dbid = "";
      var dbidTable = "";
      var dbidInvoices = "bmf5dp7g5";
      var apptoken = "";
      $.ajaxSetup({data: {apptoken: apptoken}});
      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");
      }
    })();


  • 11.  RE: Irritating text box width/wrapping

    Posted 02-18-2018 11:36
    Thank you kindly - I will put on my to-do list and let you know when done and if I needed to change anything / how I went. as always really appreciate your wisdom. Back to sleep for you! lol, we cant have the lord of Java tired ;)


  • 12.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-18-2018 11:40
    Actually I am working in Haskell on project having nothing to do with QB.


  • 13.  RE: Irritating text box width/wrapping

    Bronze
    Contributor
    Posted 02-19-2018 09:27
    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?


  • 14.  RE: Irritating text box width/wrapping

    Bronze
    Contributor
    Posted 02-19-2018 09:27
    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?


  • 15.  RE: Irritating text box width/wrapping

    Top
    Contributor
    Posted 02-19-2018 09:32
    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. 


  • 16.  RE: Irritating text box width/wrapping

    Posted 02-19-2018 10:07
    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�);