Create a dynamic effect by adding space between two texts on the page

const Button = () => {

    const options = ['test1', 'test2', 'test3'];

    return (
         <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#006C84' }}>
            {options.map(opt => (<span style={{ paddingRight: '10px' }}>{opt}</span>))}
         </div>
     )
    }

I have a code snippet above which is showing some extra space at the end of the text. How can I remove that space?

https://i.stack.imgur.com/07uX0.png

javascriptcssreactjsarrays

Answer №1

When applying paddingRight: 10px to the span, there is some leftover space shown at the end of the last child.

There are a couple of ways to address this:

  1. Using JavaScript
  2. Utilizing CSS

JavaScript Approach

{options.map((opt,index) => (
        <span style={{ paddingRight: options.length - 1 === index ? '10px' : "0px" }}>{opt}</span>)
   )}

CSS Approach To resolve this issue, consider switching from inline styles to an explicit style or creating a separate style object for better organization and maintenance.

  <div className="parent">
        {options.map(opt => (
            <span style={{ paddingRight: '10px' }}>{opt}</span>)
        )}
     </div>

.parent{//parent css goes here}
.parent span:not(::last-of-type){padding-right: 10px}

Answer №2

const ButtonComponent = () => {

    const buttonOptions = ['option1', 'option2', 'option3'];

    return (
        <div style={{ display: 'flex', gap: '10px', backgroundColor: '#006C84', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', position: 'absolute', left: '8px', width: 'auto' }}>
            {buttonOptions.map(option => (
                <span>{option}</span>)
            )}
        </div>
   )
}

Include the use of display: flex and gap in the styling of the parent div

Visit this link for a live demo

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

Cannot save PDF files to a server using jsPDF

I'm new to this community and still learning javascript & php. I am having trouble saving my PDFs with jsPDF to the local storage on the server (automatically generated). It used to work in the past, but now when I add Canvas (javascript) to my HTML, ...

javascriptphpajaxjspdf

Issue with sticky positioning not functioning properly with overlapping scrolling effect

When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...

htmlcss

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Currently, I am immersed in a project based on the MVC framework and utilizing the Kendo DropDownList. An problem has arisen, which is visualized in the image below. Specifically, the items of the Kendo DropDownList are becoming obscured by the PDFViewer ...

asp.net-mvccsskendo-uikendo-asp.net-mvc

What is the best way to directly send a message from a panel to a page-mod's content script?

When working with a code snippet in a Firefox addon like the one below: var pagemod = PageMod({ include: ['*'], contentScriptFile: [data.url('content.js')] }); panel = require("sdk/panel").Panel({ width: 322, height: 427, ...

javascriptfirefox-addon-sdk

Transforming the format of multi-dimensional arrays in PHP

Is there a way to transform the initial array into the desired final array structure using PHP? Array ( [0] => Array ( [month] => 2007-02 [clicks] => 94 ) [1] => Array ( [month] => 2007-03 [clicks] => 6930 ) [2] => Ar ...

phparraysmultidimensional-arraykey-value

Change the position of the specified footer on the one-page website

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively. Does anyone have any sugge ...

htmlcss

Issue with useState not causing a rerender in React Testing Library due to mocking

Challenging Code Scenario Greetings, I come bearing a perplexing test case that has left me scratching my head. In our application, there exists a component nestled within a context, and the behavior is not aligning with my expectations. Within this conte ...

reactjsunit-testingreact-hooksreact-testing-libraryreact-testing

Toggle Canvas Visibility with Radio Button

As I immerse myself in learning Javascript and Canvas, the plethora of resources available has left me feeling a bit overwhelmed. Currently, I am working on a dress customization project using Canvas. // Here is a snippet of my HTML code <input type=" ...

javascripthtmlcanvas

What is the method for adding pages to the ion-nav component in Ionic with Angular?

How can I implement a UINavigationController-like functionality in iOS using an ion-nav element? The example provided here is in Javascript, but I need assistance with implementing it in Angular. Specifically, I'm unsure of how to programmatically add ...

javascriptnode.jsangulartypescriptionic-framework

variable identifier looping through elements

I'm attempting to assign a dynamic ID to my div using ng-repeat. Here's an example: <div id="$index" ng-repeat="repeat in results.myJsonResults"> <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResul ...

javascripthtmlangularjs

What is the best way to transfer the main-video-wrap div into the video-list-Wrapping div?

Thank you @Kathara for your valuable assistance I have successfully set up the video layout with a picture-in-picture mode option. When I click on a video to move it to the background, it works well. However, I am facing difficulty in moving the entire vi ...

javascriptjquery

unable to choose just one material ui checkbox

I'm new to using React and I'm currently developing a simple todo app with React JS and Material UI. To accomplish this, I've created two separate components - one for taking user input (TodoInput) and another for rendering each individual t ...

javascriptreactjsmaterial-ui

Enhance React Child Components Rendering

Is there a way to automatically re-render one or both of the children components when one of them updates? My component structure is as follows: const ContributeBody = () => ( <StyledContributeBody> <LastThreePages /> <Contribu ...

reactjsreact-reduxnext.jsfluxfaunadb

The specified method is not recognized as a function in the ReactJS library

Within my reactJS application, there is a function that calls upon a helper function to retrieve the result of a calculation. The component looks like this: import React, { Component } from "react"; import * as d3 from "d3"; class DrawImage extends Comp ...

javascriptreactjs

I find the Toggle Switch in Material-UI to be quite unattractive

I am new to Material UI and having trouble understanding why my Toggle is not displaying correctly. See the screenshots 1 and 2 I have checked my code and there are no compilation errors. Here is a snippet of my simple code: return ( <Grid containe ...

reactjsmaterial-ui

I would like to share tips on integrating React.js with a backend through React Hooks and the process of deploying the application on Heroku

Looking to integrate the React front-end framework with my backend express.js and EJS using React Hooks. I am familiar with using app.get() in Express for handling server requests, but unsure how to coordinate that with starting a React server on localh ...

node.jsreactjsexpressherokureact-fullstack

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

Currently, I am facing an issue in AngularJS 1.x. When I save a value in the $rootScope and pass to the next page or router, unfortunately, the $rootScope value gets lost upon refreshing the page (F5/Window Reload). I need a solution that doesn't inv ...

javascriptangularjs

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss

Converting data from a JSON-like file format into valid JSON using JavaScript

I have a unique situation where I am dealing with numerous files that have an unusual file extension. My goal is to utilize JavaScript to read these files and then convert their contents into either JSON or regular JavaScript objects. Is this task even fe ...

javascriptjsonparsing

Troubleshooting the onExited callback issue with Popover component in Material UI

<Popover key={element.name} classes={{ paper: classes.paper }} open={open} anchorEl={this.myRef.current} anchorOrigin={{ vertical: ' ...

javascripthtmlcssreactjsmaterial-ui