Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries.

To view the code on codesandbox, please visit HERE

EXPECTED OUTPUT

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

CODE

const OR = styled.div`
  display: flex;
  flex-direction: row;  
  color: #5C5C5C;
  font-size: 14px;
  &:before, &:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    border-color: #A1A1A1;
    margin: auto;
  }
  &:before {
    margin-right: 10px
  }
  &:after {
    margin-left: 10px
  }
}
`;
cssreactjsstyled-components

Answer №1

Upgrade your OR element in this way


    const OR = styled.div`
      display: flex;
      width:50%; // Include
      flex-direction: row;  
      color: #5C5C5C;
      font-size: 14px;
      margin: auto; // Include
      &:before, &:after {
        content: "";
        flex: 1 1;
        border-bottom: 1px solid;
        border-color: #A1A1A1;
        margin: auto;
      }
      &:before {
        margin-right: 10px
      }
      &:after {
        margin-left: 10px
      }
    }
    `;

Answer №2

Applying max-width to the pseudo elements ::before and ::after

const StyledDiv = styled.div`
  display: flex;
  flex-direction: row;  
  color: #5C5C5C;
  font-size: 14px;
  &:before, &:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    border-color: #A1A1A1;
    margin: auto;
    max-width: 30%;
  }
  &:before {
    margin-right: 10px
  }
  &:after {
    margin-left: 10px
  }
}`

Check out the latest page

Answer №3

 &:before, &:after {
    content: "";
    width:50%;
    height: 2px;
    background-color: #B1B1B1;
    margin: auto;

Replace the border with this code.

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

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

Using either Google Maps or a customized mapping solution in a React Native application

I am currently developing an application that allows users to input addresses and locate them on a map. I am wondering if implementing AI technology or utilizing specific libraries is necessary in order for this feature to function properly within a reac ...

androidreactjsreact-nativegoogle-maps

Trouble with Z-index on FireFox when using absolute positioning

After reviewing some other questions, it seems that the z-index issue in Firefox is often related to one of the items not being set as position:Absolute. <div id="AnimatedBanner" style="right:-5px;"> <object style="positio ...

htmlcssfirefox

Resizing the Logo as You Scroll

I need my logo to shrink when I activate the slideshow, similar to what is shown in the image. https://i.sstatic.net/WhobD.jpg However, I'm struggling to get the jQuery code to work. Can someone please demonstrate how I can shrink a logo, like the o ...

jqueryhtmlcss

Whenever I attempt to render a component passed as a prop, I encounter error TS2604

I am attempting to pass a component as a prop to another component in order to wrap the content of a material ui modal This is my attempt so far: import React, { Component } from 'react'; import withWidth, { isWidthDown } from '@material-u ...

reactjstypescript

Retrieving information and implementing condition-based rendering using React's useEffect

I am currently developing a MERN stack application that retrieves information regarding college classes and presents it in a table format. The CoursesTable.js component is structured as follows: import React, { useState, useEffect } from 'react'; ...

javascriptreactjsapiaxiosuse-effect

Steps for adding a border to kendo grid row hover

One of my tasks involved creating a grid using Kendo, and I wanted to display borders on a grid row when the cursor hovers over it. I attempted the following code snippet: .k-grid > table > tbody > tr:hover, .k-grid-content > table > tbody ...

javascripthtmlcsskendo-uikendo-grid

an li element is accompanied by a visible box

In my possession is a container: #box1 { height:100px; width:208px; } along with a series <li id="first"><strong>FIRST</strong> </li> <li id="second"><strong>SECOND</strong&g ...

jquerycss

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

pythonhtmlcssdjango

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

Exploring Next.js: A guide to implementing a GET request with React Query

Looking to integrate React Query for data fetching from a server. Previously, I was using Axios to fetch the REST API. I've created a custom hook for fetching and now want to incorporate it with React Query. However, when trying to destructure t ...

reactjsnext.jsreact-query

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('.navba ...

jqueryhtmlcsstwitter-bootstrap-3

Clicking on two svgs that overlap, on the other hand

Creating a web page buttons panel using .svg files has been an interesting challenge. After adjusting margins and other CSS attributes, I managed to position the buttons as seen in the code. The issue at hand: I'm facing difficulty with making both b ...

htmlcsssvg

Having trouble resolving row border issues with CSS in DataTables?

I need to enhance the appearance of specific rows in my table by adding a darker border at the bottom. To achieve this, I have assigned a custom class (des-rec-row) to the rows and included the following CSS code: .des-rec-row { border-bottom: 1px soli ...

cssdatatables

Determining a User's Connection Status in ReactJS: Cellular Network or WiFi?

Are there any tools or applications available that can determine if a user is connected to WiFi or using a cellular network? ...

javascriptreactjs

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

Error: Package.js detected multiple versions of fbjs installed

While attempting to update from version 0.10.5 to 0.11.0, I encountered the following error message. Surprisingly, gbjs is not even included in my package.js file. [compileVendorDll] ERROR in fbjs [compileVendorDll] Multiple versions of fbjs found: [com ...

reactjsnpmnode-modulesyarnpkg

Capybara's attach_file function is not properly activating the React onChange handler in Firefox

Currently, I am conducting tests on the file upload feature of a React-built page. The page includes a hidden file input field with an onChange event listener attached to it. Upon selecting a file, the onChange event is triggered and the file is processed ...

javascriptrubyreactjsseleniumcapybara

Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...

css