Here is an example of what I'm trying to achieve:
https://i.sstatic.net/U3Fvs.png
This is the current input code
<input type='text'
id='c-start-retro-form-retroname'
className='u-margin-bottom-tiny u-margin-top-tiny u-1/1'
placeholder={'Retrosopective name'}
onChange={this.handleRetrospectiveNameChange}>
<i className='fa fa-folder'></i>
However, the folder icon appears outside the input. How can I adjust it to display a vertical line and have the icon inside?
Include the following CSS styles:
i.fa-folder {
transform: translatex(calc(-100%)); /* move the icon to the left */
border-left: 1px solid black; /* add a left border */
padding: 0 7px; /* set padding on left and right */
}
input {
padding-right: 2em; /* ensure typing does not overlap with icon */
}
Code Snippet:
i.fa-folder-open {
transform: translatex(calc(-100%)); /* move the icon to the left */
border-left: 1px solid black; /* add a left border */
padding: 0 7px; /* set padding on left and right */
}
input {
padding-right: 2em; /* ensure typing does not overlap with icon */
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<input
type='text'
id='c-start-retro-form-retroname'
className='u-margin-bottom-tiny u-margin-top-tiny u-1/1'
placeholder='Retrosopective name'
/>
<i class="fa fa-folder-open"></i>Innovative designs often involve combining a variety of HTML elements to create more intricate presentations. The input field showcased in the image is likely assembled using a mixture of div, input, img, and potentially other carefully stylized components.
There exist numerous libraries designed to assist in crafting similar components. Explore Semantic UI for instance, where you can find a selection of input components that bear resemblances to your vision. One particular lookalike example can be seen here:
https://i.sstatic.net/4pmlW.png
On a separate note, if ever intrigued by how specific website components are built, utilize your browser's Developer Tools to examine the elements and study their composition and styling. For Chrome users, simply right-click on any component within the webpage, choose Inspect, and gain insight into the nested structure and CSS properties of said element. For instance, the Semantic UI input component mentioned earlier consists of an encompassing div, along with an input and another nested div:
I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...
I'm struggling with aligning the navigation buttons on my nav bar to the left and the signup/login links to the right. I attempted to create separate navbars for each, but it's causing issues in my code. I tried using ':last-child' but ...
While I was blockwise segregating elements of a webpage and drawing borders around those blocks, I encountered an issue where the height turned out to be 0 when the display was set to flex. How can I retrieve the height in such scenarios? I experimented wi ...
I am currently working on an MVC project that utilizes Bootstrap. My requirement is to have a horizontal menu of links that can slide left and right using arrows (similar to a carousel, but for links instead of images). To be more specific, the menu need ...
I have an Angular application that is used to display company and contact person information in a text box format. Here is the code for displaying the Company Email address: <label> Company Email address</label> <input type="text& ...
I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...
What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? https://i.sstatic.net/0m9rH.png ...
I have a customized navbar(bootstrap) on my webpage. <nav class='navbar fixed-top navCustom '> <div class='navComp'> <input class='dateStyle' id='dateChart' type='date' value=& ...
I am currently managing Facebook Ads for a client, but I have encountered an issue with their website not being responsive on mobile devices. While I have some knowledge of basic HTML & CSS, I am uncertain about how to address this particular problem. The ...
Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...
My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...
Seeking assistance with aligning a pagination element alongside other buttons and labels within the same row. I would like to have a label displaying current and total item counts right before the pagination elements, ensuring that everything is middle-ali ...
Question about Bootstrap 5.1.3: Is there a way to hide elements on a page using the bootstrap class ".invisible" without allocating space for them? Currently, when the elements are set to visible using the class ".visible", they occupy space on the page ...
I am working with an iPad frame and trying to implement a feature where a larger image scrolls behind it as the user scrolls down the page. Although my CSS is more complex than the example provided in this link, I am struggling to get even that basic funct ...
How can I ensure that a Bootstrap 5 grid row expands to fit its entire content vertically? Adding a label element causes the content of the first row to overlap with the second row in the example provided below. <!doctype html> <html lang="en ...
My goal is to create a background reveal effect using JavaScript by increasing the percentage. The effect should start from the center and expand outwards in all directions. Issue: The percentage increase currently affects only the bottom and not the top ...
HTML CODE <div id="scrollidout" style="overflow: auto; overflow-y: hidden; "> <div id="scrollidin" style="padding-top: 1px; height: 20px; width: 1000px"> </div> </div> <div class="resultcontent" style="overflow ...
There are two div elements in my HTML code: <body> <div id="one"></div> <div></div> </body> I am looking to hide the div elements after the one with id="one" using CSS. I attempted this method: #one:after{display: ...
Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...
There seems to be a padding issue that is only affecting mobile devices. https://i.stack.imgur.com/2Tbuc.png The cause of this problem has been somewhat identified, but the solution isn't clear without impacting the preview on computers. Here is th ...