Expand the width of a textbox with link according to how many characters.

Cherry · November 5, 2023

Hi everyone,

I need some help on this, I am not an expert in HTML. I have an HTML. Inside my page, I added a textbox with a link. Currently, the code that I added is a fixed width. How can expand the width of a textbox with a link according to how many characters? And also, how can I add space between boxes? I will attach the code currently I am using.

Please see the attached screenshots.

Thanks.

-Cherry

___________________________________________

This is the code I am using now,

<style>

/************** ------HOME SECTION------******************/

.home-section{
position: relative;
background: #ffffff;
min-height: 100vh;
width: calc(100% - 180px);
left: 180px;
transition: all 0.5s ease;
}

.sidebar.active ~ .home-section{
width: calc(100% - 60px);
left: 60px;
}

.home-section nav{
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
display: flex;
align-items: center;
position: fixed;
width: calc(100% - 180px);
left: 180px;
z-index: 100;
padding: 0 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}

.home-section .home-content{
position: relative;
padding-top: 104px;
}

/************** HOME CONTENT TEXT BOXES ***********************/

.home-content .overview-boxes{
display: flex;
align-items: center;
justify-content: none;
flex-wrap: wrap;
padding: 0 20px;
margin-bottom: 26px;
margin-top: 20px;
}
.overview-boxes .box{
display: flex;
align-items: center;
justify-content: center;
width: calc(50% / 3 - 10px);
background: #c5cdfe;
padding: 5px 1px;
border-color: #747474;
border-width: 10px !important;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
font-size: 17px;
font-weight: 300;
}
.home-content .box .text_a{
display: inline-block;
font-size: 30px;
margin-top: -6px;
font-weight: 500;
}
.home-content .box .indicator{
display: flex;
align-items: center;
}
.home-content .box .indicator i{
height: 20px;
width: 20px;
background: #8FDACB;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-right: 5px;
}
.box .indicator i.down{
background: #e87d88;
}

.home-content .box .indicator .text{
font-size: 12px;
}
.home-content .box .right{
display: inline-block;
font-size: 23px;
height: 37px;
width: 50px;
background: #cce5ff00;
line-height: 50px;
text-align: center;
border-radius: 12px;
margin: -15px 0 0 0px;
}

</style>
</head>
<body>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="https://c8ebv223.caspio.com/dp/ed40c000559c6581684c4821bb00" target="_self">New Employee</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Previous Employees</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Employee's Management</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

</div>
</div>

<span style="font-size:20px; font-color: #800000; font-family:'Poppins', sans-serif; margin-left: 20px; ">
<strong>Payroll Staff </strong>
</span>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Everyone</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Office</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Engineers</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Sales</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Customer Service</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Service Hub</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Flash Monitoring</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Aerotech</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

<div class="box">
<div class="right-side">
<div class="box-topic"><a href="#" target="_self">Power</div>
</div>
<i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i>
</div>

</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Barry · November 6, 2023

Hello Cherry,

To add the space between boxes you can use a gap in your flex container and play with the measure until you are happy with the result. Like the following:

 .overview-boxes {
	gap: 5px;
}

For the width of each box according to the characters, as it seems that your text is fixed and will not change, I would use the "ch" measure in the style, for example in the "Sales" box using "width:5ch" would make the div container to be 5 characters in width. In your code, you can add it to the HTML div like this:

<div style="width:5ch" class="box">

I would also make the text to nowrap with the ones that have more than one word for it to not break in a new line. Something similar to this(for the Box 8):

<!-- BOX 8 -->
        <div style="width:16ch; text-wrap:nowrap" class="box">

Cherry · November 7, 2023

@BarryThank you so much Barry. I will try to add the code.

Login

Expand the width of a textbox with link according to how many characters.

Question

Cherry

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Barry

Link to comment

Share on other sites

Cherry

Link to comment

Share on other sites

Join the conversation

Browse