Is the "Apply with LinkedIN" button not displaying correctly on the page?

I have managed to integrate the Apply with LinkedIN button on my website, but I am encountering a styling issue. The button is displaying strangely, even though I am using bootstrap 3.1. Has anyone else faced a similar problem and found a solution?

I have tried various solutions and attempted to override my CSS, but without success since all the changes seem to be done from JS.

Below is the code snippet I received from the API:

<script type="IN/Apply" 
    data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dcc1d8d4c9d5dcf9dcc1d8d4c9d5dc97dad6d4">[email protected]</a>" 
    data-companyid="55885" 
    data-jobtitle='Developer' 
    data-joblocation='Serbia'
    data-themeColor="#FF9900" 
    data-showText="false">
</script>
javascripthtmlcsslinkedin-api

Answer №1

Perhaps the issue arises because the LinkedIN script does not seamlessly integrate with box-sizing: border-box (a style commonly used in newer versions of Twitter Bootstrap).

If this is the case, it mirrors the problem discussed in this forum thread. To address this, consider incorporating the following CSS snippet into your code:

span[id*='li_ui_li_gen_'] {
    -webkit-box-sizing : content-box;
       -moz-box-sizing : content-box;
         -o-box-sizing : content-box;
            box-sizing : content-box;
}

Answer №2

After experimenting a few times, I came up with a basic CSS override to tackle this issue. Feel free to incorporate the following code into your stylesheet:

span.IN-widget span span a span {
    width:200px !important;    
    text-align:center !important;
}

Answer №3

As of July 21, 2014, LinkedIn has officially phased out this feature. They are recommending users to transition to the Profile API for similar functionalities.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform JSON structure (Group data)

Here is the JSON object I am working with: [{ "name" : "cat", "value" : 17, "group" : "animal", }, { "name" : "dog", "value" : 6, "group" : "animal", }, { "name" : "snak", "value" : 2, "group" : "animal", }, { "na ...

javascriptjson

Create a bolded section within a TextField component using Material UI version 5

I am working with a TextField component that has a specific defaultValue set. Here is the code snippet: <TextField autoFocus={props.autoFocus} fullWidth defaultValue={props.defaultValue} value={text} onKeyPress={handleKey ...

javascriptcssreactjsmaterial-ui

What are the steps to create a navbar positioned below an image?

I have my navbar on another page, but I would like to center it directly under the logo or image. My align-items property doesn't seem to work, so I've had to set the height in the .logo class. Is there any other method I can use to achieve this? ...

htmlcssimagenavbar

Making a REST API call with an ID parameter using Angular

I am currently working on an Angular application that interacts with a REST API. The data fetched from the API is determined based on the customer ID, for example: api/incident?customer_id=7. I am unsure of how to incorporate this into the API URL and serv ...

javascriptangular

Utilizing Google's Text-to-Speech Service to Download Audio Files on the Front-end

I have a specific need to transform text into audio by utilizing Google Text to Speech. Currently, I am implementing Nodejs to convert the text into an audio file and aiming to transmit the audio result to the user interface. The NodeJS code snippet is a ...

javascriptnode.jsvue.jsarraybuffergoogle-text-to-speech

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...

csshtmlaccessibilitysection508wcag2.0

Incorporate a linked select dropdown into the registration form

I am working on a sign-up form and trying to integrate 2 linked select boxes into the form. The code for the linked select boxes works fine separately but when I attempt to add it to the form, it doesn't display as expected. I attempted to incorporate ...

javascripthtmlangular

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

Generating consecutive numerical values within the auto table JSPDF column VusJs

https://i.sstatic.net/idhrw.png columns: [ { header: 'No', dataKey: 'Index', }, { header: 'No Registrasi', dataKey: 'no_register' }, { header: 'Kode Partai', data ...

javascriptvue.jsjspdf-autotable

Mixing has() and gt() for great results

Having trouble combining has() with :gt in jQuery 1.4.2. I want to select any <ul> that has more than 3 <li>s, but my attempted solution is not working: $(document).ready(function(){ $("ul.collapse:has(li:gt(2))") .each( function() { ...

javascriptjquery

Determining the width of an element in terms of percentage

My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...

javascriptcssdom

Error 400: Invalid Request: Issue encountered when swapping code for Asana access token using Next.js

Encountered a 400 Bad Request error while trying to exchange the code for an access token at . I am unsure of the cause and would appreciate any assistance. Below is the code: const GetAsanaAccessToken = async (req, res) => { const body = { grant ...

javascriptapinext.jsasanaasana-api

Retrieving row and column values from an 81-element indexed array

I am working with an indexed JavaScript array that contains exactly 81 elements. These elements will form a 9x9 grid, similar to a Sudoku puzzle. Right now, I am trying to figure out the most efficient way to extract row and column values from this array. ...

javascriptarrays

Resetting an object back to its initial value while preserving its bindings in AngularJS

My service deals with a complex object retrieved from an API, like this: { name: "Foo", addr: { street: "123 Acacia Ave", zip: "10010" } } The initial value is stored in myService.address, and another variable holds a copy of ...

javascriptangularjsdata-binding

Ways to retrieve child state in React?

After creating my own form component with a render() method that looks like this: render() { return ( <form onSubmit={this.onSubmit} ref={(c)=>this._form=c}> {this.props.children} </form> ) } I enabled ...

javascriptreactjs

Detect Empty Fields as Invalid in Angular 2+ Form Validation

I have been implementing Form Validations in my form using reactive form validation. However, I encountered a challenge when checking a field that is touched and dirty. For example: HTML: <input id="name" class="form-control" formControlName="n ...

javascripthtmlangulartypescript

Adjust the size of an image within a canvas while maintaining its resolution

My current project involves using a canvas to resize images client-side before uploading to the server. maxWidth = 500; maxHeight = 500; //handle resizing if (image.width >= image.height) { var ratio = 1 / (image.width / maxWidth); } else { var ...

javascripthtmlcanvashtml5-canvas

Creating a Python web scraper that utilizes Selenium and PhantomJS to extract DOM information

Attempting to extract data from a website that uses JavaScript to build the DOM, I employed both Selenium and PhantomJS. While the code provided below sometimes works, it often retrieves an empty website without executing the necessary JavaScript. Only oc ...

javascriptpythonpython-3.xseleniumphantomjs

Unable to view Google Map markers within my XPath elements while using Selenium?

Looking to extract data from a Google Maps applet. The specific page can be found here: You can click on items on the map to view displayed information. While typical Google Maps show marker elements, I cannot see them on the provided link when inspecti ...

javascriptseleniuminspect

Is the table row changing in size when a filter script class is applied?

When trying to filter table rows by category and adding the class filterTr to the element <tr>, I noticed that the width of the <tr> element changes, causing it to no longer align with the <th> element above. I am unsure why this resizin ...

cssfilterhtml-tablewidth