CSS: Pixels X Distance Away from the Right

I am incorporating custom CSS into my website for translation purposes, and the code provided by my programmer looks like this:

<div class="gtranslate_wrapper"></div>
<script>
  window.gtranslateSettings = {
    "default_language": "en",
    "detect_browser_language": true,
    "languages": ["en", "pt"],
    "wrapper_selector": ".gtranslate_wrapper",
    "flag_size": 16,
    "horizontal_position": "right",
    "vertical_position": "top",
    "alt_flags": {
      "en": "usa",
      "pt": "brazil"
    }
  }
</script>
<script src="https://cdn.gtranslate.net/widgets/latest/fc.js" defer></script>

However, I want to move it about 300px from the right instead of being at the top right. How can I achieve this?

I attempted using "horizontal_position":"right:300px" but it did not work as expected, pushing the flags and codes all the way to the left. I also tried adding a "border-right: 300px solid transparent" feature, but it resulted in the same outcome.

javascripthtmlcss

Answer №1

I am unsure about the code that is running in the background of this script and the linked JavaScript file.

My assumption is that it is generating something that places the following HTML tag:

<div style="overflow: hidden">
    <div style="float: left">&nbsp;</div>
    <div style="float: right" class="gtranslate_wrapper"></div>
</div>​

<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"languages":["en","pt"],"wrapper_selector":".gtranslate_wrapper","flag_size":16,"horizontal_position":"right","vertical_position":"top","alt_flags":{"en":"usa","pt":"brazil"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/fc.js" defer></script>

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

Mastering Ajax Technology with Five Dropdown Menus

I'm currently working on a form that includes 5 drop-down lists generated by PHP querying a MySql database. The lists are being populated correctly. My goal is to allow users to select an option from the list and have it automatically populate the fo ...

phpjavascriptajax

What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

I'm facing an issue with preventing the destruction of my object after loading it. var loader = new THREE.ColladaLoader(); var rescue; loader.load( 'Improved_Person_Maker_better_quality.dae', function(collada) { scene.add(co ...

javascriptscopethree.js

Sending URL parameters through URL redirection

As a newcomer to the world of development, I have recently started learning how to code. I am currently only comfortable with HTML/JS/CSS and NODE/Express.js for server side development. PROJECT DETAILS I am in the process of creating a social platform s ...

javascripthtmlnode.jsurl-parametersforwarding

Navigating through the labyrinth of SSH documentation

I'm looking to develop a lightweight SSH protocol client implementation for node.js. The documentation at is causing confusion. It lacks a comprehensive example of the key exchange process, making it difficult to understand how all the components fi ...

javascriptnode.jsssh

The issue of AngularJS failing to bind object properties to the template or HTML element

Just dipping my toes into angularJS, following Todd Motto's tutorials, and I'm having trouble displaying object properties on the page. function AddCurrentJobs($scope){ $scope.jobinfo = [{ title: 'Building Shed', description: ...

javascripthtmlangularjs

Stylish CSS menu that adjusts to different screen sizes, featuring a centrally aligned h1

I am trying to center an h1 element in my navigation, alongside two other elements, without using an image. I want it to be responsive as well. I have attempted various methods but have had limited success, as most solutions require the use of background i ...

htmlcssresponsive-designresponsiveness

The scrollTop functionality is not functioning as expected in AngularJS when using the $timeout directive

In my angularJS project, I'm working on implementing a small chat feature. To ensure that the messages are always visible to users, I need the message display div to automatically scroll down when the page loads. For this purpose, I have created a cus ...

javascripthtmlangularjs

Uncovering the Truth About Memory Problems in Cloud Functions

Currently engaged in daily user management tasks within a user database containing around thirty thousand users. However, it seems that the function is struggling to handle the large size of the database. I have optimized the function as much as possible ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Adjust background color (scrolling) as element reaches specified point (Responsive)

Hello everyone, I'm a newcomer to Javascript and I've tried searching for solutions on my own before reaching out here. My goal is to change the background color when specific div tags with certain ids are 150 pixels away from the top of the bro ...

htmltagsresponsivebackground-color

Utilize jQuery script to add CSS styling to an AngularJS expression

I'm experiencing some confusion with a jQuery script I have. It is designed to change the text color to red if it detects a negative number in an HTML table. console.log("reading Script"); $('td:nth-child(3)').each(function() { ...

javascriptjqueryangularjs

Is it possible for an absolutely positioned element to have floating elements wrapping around it?

Within my content box (#left-home-content), I have a series of paragraphs followed by a link in a <span> tag (.read-more-link), and then a <div> tag (#left-home-spread) that needs to be positioned absolutely at the bottom of the box. This may s ...

htmlcss

choose among various options in Javascript

I'm currently using PHP and AJAX to create a basic CRUD system. I want to display a form with three buttons: Grabar, Modificar, and Eliminar. The issue I'm facing is determining the action to take based on which button is clicked. For instance, c ...

javascriptajax

The hide() and on() methods are not compatible with Internet Explorer (IE)

My code is working fine on Google Chrome, but for some reason it's not functioning properly on Internet Explorer (IE). I'm using IE11 and really need this to work on all browsers. Please help me figure out what's going wrong here. $(' ...

javascriptjqueryhtmlcssinternet-explorer

The vertical-align property fails to properly align the list-style-image with the text

My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...

htmlcss

Ways to extract a collection of values using a designated CSS Selector

Is there a way to quickly retrieve a list of values from a specific CSS selector? I am interested in extracting text enclosed in <strong> tags only. Currently, I am using : document.querySelectorAll("p > strong") However, the result I ...

javascriptjquerycssnodelist

Is it possible to retrieve a value from an xhttp request?

I am currently working on an xhttp function that interacts with my database and returns an array. The content of the array varies based on the parameter provided in the xhttp function during its execution. Below is the code snippet for the xhttp function: ...

javascriptxmlhttprequestvue.js

Is there a way to dynamically append options to a Bootstrap selectpicker?

I'm attempting to design a dropdown feature that, when activated by clicking on the first list item, displays a new list of related items next to the initial selection. Here's an illustration: https://i.sstatic.net/fMxAj.png My approach involve ...

javascriptjquerybootstrap-4bootstrap-selectpicker

Insert a line break element following every 12th character within a given string

$my_string = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." Desired Output : "Lorem Ipsum <br/> is simply<br/> dummy text<br/>of the printing<br/> and typesetting<br/> industry." The tag should ...

phphtmlstring

Struggling to resolve an axios promise within a redux reducer function

Currently, I am working on fetching a list of channels from the Slack API and then storing them in the Redux store for my React application. The issue I'm facing is that axios returns a PromiseValue which makes it difficult to access the objects insi ...

javascriptreactjsreduxpromise

Rebalancing Rotation with Three.js

Currently, I am utilizing Three.js and my goal is to swap out an object in the scene with a new one while maintaining the same rotation as the one I removed. To achieve this, I take note of the rotation of the object I'm removing and then utilize the ...

javascriptthree.js