Using a double border causes the div to appear bigger in size

I'm currently working with React and Tailwind CSS, and I have a specific design goal in mind:

https://i.sstatic.net/rbVP1.png

To achieve this, I added borders to both the + and - buttons, as well as a border on the parent div to encompass all elements.

However, the borders on the buttons appear larger due to the doubling of borders.

If I try using a border only on the right for the - button, there is a slight gap without a border...

Does anyone know how I can accomplish this seamlessly? Any suggestions or advice would be greatly appreciated!

For reference, here is a link to the Tailwind Playground.

Below is my code snippet:

<div class="p-8">
  <div class="flex w-fit items-center rounded ring-1 ring-neutral-300">
    <button type="button" class="h-10 w-10 rounded border border-neutral-300 bg-transparent focus:outline-none">-</button>

    <input id="{id}" type="number" value="{count}" class="arrow-hide h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 rounded border border-neutral-300 bg-transparent focus:outline-none">+</button>
  </div>
</div>

Your help is truly appreciated! Thank you.

cssreactjstailwind-css

Answer №1

When using a border only on the right for the button, there seems to be a slight gap without a border...

In reality, it's not missing any pixels; it appears faded due to the rounded border.

Possible solution:

  1. Omit rounded from the + and - divs
  2. Apply only left and right borders to their respective divs.

Revised Code:

<div class="p-8">
  <div class="flex w-fit items-center rounded ring-1 ring-neutral-300">
    <button type="button" class="h-10 w-10 border-r border-neutral-300 bg-transparent focus:outline-none">-</button>

    <input id="{id}" type="number" value="{count}" class="arrow-hide h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 border-l border-neutral-300 bg-transparent focus:outline-none">+</button>
  </div>
</div>

Result:

https://i.sstatic.net/auqug.png

Check out Tailwind-play

Answer №2

To achieve a rounded border on the inside corner of the buttons, consider making them overlap the container's border:

margin: -1px; position: relative; z-index: 1; height: calc(2.5rem + 2px);

In order to add two extra pixels of height, it may need to be hard-coded since it can't be directly combined with the h-10 class. Using z-index ensures that the input field will not cover the left button's right-side border.

This method is only effective if there is no transparency needed in those borders.

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

Send a parameter to the state from the component to access the object property key within a React array

I am managing a state that contains an array of objects: const [Value, setValue] = useState([{ Width: null, Length: null }, { Width: null, Length: null }]) In addition, I have a component where I need to retrieve the value for Value using the setValue fun ...

reactjsreact-hooks

Tips for implementing a minimum height for a Bootstrap row

I am facing an issue with setting the min-height of a row in Bootstrap. I would like the min-height of my row to be equal to that of the parent element, as shown below: body { height: 100%; } .header { height: 30px; } .footer { height: 100px; ...

htmlcssbootstrap-4

What causes the return of an empty object when using element or xpath searches with HTMLSession in requests-html?

I am looking to confirm the existence of a specific element. My approach is to print it out so that I can compare it with a string or another value. Below is the code causing issues: session = HTMLSession() r = session.get('https://www.walmart.com/ip ...

javascripthtmlcssxpathpython-requests-html

Exploring Conditional Rendering with React Components

Attempting my first unit test and need to validate rendering in a modal or dialog based on conditions. After exploring various resources, I couldn't find a solution similar to my case. I referred to a course by Maximilian Schwarzmüller on Udemy for ...

reactjsreact-testing-librarybabel-jest

How come I'm unable to adjust the height of these autocomplete boxes using inline styles? Is there a way to make their height the same as that of a button

I am struggling with adjusting the height of the Autocomplete box in react.js. Despite setting both width and height properties, only the width is being rendered. <Autocomplete id="combo-box-demo" ...

reactjsautocompletematerial-uibox-sizing

What is the best way to implement startdate and endate in Bootstrap React JS?

I am attempting to create a date input where the end date cannot be selected before the start date (e.g. if I choose 10/10/2019 as the start date, the end date should only allow dates from 10/10/2019 onwards). I have tried implementing this in React js b ...

reactjsformsbootstrap-4date-range

Caution: Exercise caution when utilizing a component sourced from a variable

Utilizing the AppBar component from http://www.material-ui.com/#/components/app-bar has presented some challenges. This is how my code appears: const Menuright = (props) => ( <IconMenu {...props} iconButtonElement={ ...

reactjsmaterial-ui

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

javascripthtmlcss

simplified code - toggle section visibility

$(".link1").click(function(){ $(".slide2, .slide3, .slide4, .slide5").css("opacity", 0.0); $(".slide1").fadeTo("slow", 1.0); }); $(".link2").click(function(){ $(".slide1, .slide3, .slide4, .slide5").css("opacity", 0.0); $(".slide2").fadeTo("slow" ...

javascripthtmlcss

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Whenever I update my website to <!DOCTYPE HTML> Each img element enclosed within a DIV mysteriously acquires a 3px bottom margin, even though no CSS rule defines it. To clarify, there are no style attributes responsible for this 3px bottom margin. & ...

csshtml

Utilizing environment files for securing and managing private keys in React applications

Hello everyone, I have a query for the tech community. I am currently working on integrating some payment functionalities that require me to use a private key to access certain endpoints. In the past, I have stored keys in the environment for smaller proj ...

reactjssecuritynext.js

Is this included in the total number of reads?

Following my query with CollectionsGroup, I attempted to retrieve the information of the parent's parent like this: db.collectionGroup('teams').where('players', 'array-contains', currentUser.uid).get().then(function(snaps ...

javascriptreactjsgoogle-cloud-firestore

What could be the reason for the hr tag's CSS not appearing in React code?

In my React code, I am trying to create a border using the following code: <hr className="borderLine" /> However, when I attempt to style it with CSS, I utilize this snippet of code: .divider { margin: 2rem; width: 100%; color: ...

javascripthtmlcssreactjs

The issue of duplicate backgrounds appearing on the burger menu when adjusting the height

There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating. .bm-menu { background-color: rgba(255, 255, 255, 0.9); height: 60vh; position: fixed; transition: top 0.3s; to ...

cssreactjsduplicates

Tooltip Bootstrap timing

I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS styles are not getting rendered by Firefox when loading content using jQuery AJAX

My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...

jquerycssajaxfirefox

Having trouble with routing nesting in react-router v4?

I find myself in the following situation: <Wrapper> <Container> <Route exact path="/" component={UserListing} /> <Route path="/user/:id" component={UserDetails} /> <Route exact path="(/|/user/\d+)" comp ...

javascriptreactjsreact-routerreact-router-v4

How to detect internet connection in any screen using React Native?

I'm facing confusion regarding how to display my customDialog when there is no Internet connection in my app. Currently, I have successfully shown my customDialog only in the LoginScreen. However, I want to display it from different screens, not just ...

javascriptandroidiosreactjsreact-native

Leveraging a regional NPM package

I'm having trouble implementing a NPM package that I downloaded from GitHub. To start, I created a lib folder within the src directory of my create-react-app project. Next, I used wget to download the tarball: wget https://github.com/frontend-colle ...

node.jsreactjsnpm

When you hover over the image, the text will disappear

When I hover over the image of LTC, a thumbnail appears with text and a button. However, I do not want the text "LTC" to be shown when hovering over the image. <div class="col-md-4"> <div class="view view-eighth"> <div class=" ...

htmlcss