Okay
  Public Ticket #3238745
Button link in string column
Closed

Comments

  • Paul Frumkin started the conversation

    In a string column I would like to add a button that redirects to another page.  I have the CSS to do this, but wpDT overwrites it and I can't figure out how to override that.  What is the best known method for adding a button link to a string column?

  •  1,850
    Miloš replied

    Hi, Paul.

    Thanks for reaching out to us. 

    When we use a string type column to make links as buttons,

    If you use a one line string, it will be limited to 255 characters; 

     if you use multi line string - it will have 65,535 character limit.

    Please check out this documentation about our text fields;

    The cells will render HTML, so you can wrap links in anchor tags, for example,

    <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
    

    this would render in cell as "Visit W3Schools.com!"  as the displayed text, but it will  lead to the link when clicked;

    and the other regular text fields will simply be rendered as text;

    -

    You can also style it, if you add an ID, or a class in my example :

    <a href="yourURL" class="customButton">Link Text</a>

    You can then add some custom CSS styles to the table, in Customise tab > Custom CSS;

    On my example i will make it look like a green button:

    .customButton { 
     background-color: #4CAF50;  
    border: none; 
     color: white; 
     padding: 15px 32px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 16px; 
     margin: 4px 2px; 
     cursor: pointer;
    }
    

    and it would look like this :

    6674728901.png

    - If the styles are being overridden, perhaps some kind of conflict from your active Theme that has specific styles;

    you can try adding !important clause to any CSS properties you need ( or all of them, if that's easier),

    and see if this "forces" the styles you need.

    So, for example, for white color and forcing our background color ,  we would do :

    .customButton { 
    background-color: #4CAF50 !important;  
    color: white !important;
    }


    Let me know how that seems, and if you have any questions. smile.png

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Paul Frumkin replied

    Thanks for your reply Miloš.  I had tried this before and I get the hyperlink but not the button.  I will meticulously review the code and see where I have gone wrong.  Thanks also for the tip about !important.  I had forgotten that, so perhaps some style element is being overwritten.  I hope to get back to this later this week, I will post an update.

    Paul

  • Paul Frumkin replied

    I added the !important to the background-color and color attributes of my custom button class and now I see my button!  Thanks for the help.

  •   Miloš replied privately