I am attempting to create a grid caret with a top and bottom caret that displays a grey area when the user hovers over each side.
<div class="control-wrap">
<div class="caret-wrap">
<span class="caret">▲</span>
</div>
<div class="caret-wrap">
<span class="caret">▼</span>
</div>
</div>
While my progress is going well, I am facing an issue with the hover effect not filling the remaining space around the caret.
Check out the demo here.
By making a few adjustments - within the .control-wrap class, you can organize the layout of the child elements (.caret-wrap), and within the child elements (.caret-wrap), you can manage the position of the caret symbol.
.control-wrap {
display: flex;
flex-direction: column;
width: 20px;
height: 30px;
margin: 0px 10px;
border: 1px solid;
}
.caret-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
cursor: pointer;
font-size: 8px;
}
.caret-wrap:hover {
background: #ddd;
}
.caret-wrap:active {
color: grey;
}<div class="control-wrap">
<div class="caret-wrap">
<span class="caret">▲</span>
</div>
<div class="caret-wrap">
<span class="caret">▼</span>
</div>
</div>To optimize the layout, it is recommended to make the following CSS adjustments. Remove align-items: center; and justify-content: space-evenly; from the .control-wrap class and add flex: 1 1 auto;, align-items: center;, justify-content: center; to the .caret-wrap class. This will ensure that child items receive full width and available height while aligning the caret in the center. For a visual representation, you can refer to the updated fiddle here.
Below is the revised CSS code:
.control-wrap {
width: 20px;
/* align-items: center; */
display: flex;
flex-flow: column;
margin: 0px 10px;
border: 1px solid;
height: 30px;
/* justify-content: space-evenly; */
.caret-wrap {
cursor: pointer;
font-size: 8px;
padding-left: 2px;
padding-right: 2px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: #ddd;
}
&:active {
color: grey;
}
}
}
In this scenario, the use of Flexbox is not necessary. The layout can be achieved without flexbox.
Furthermore, when it comes to symbols, it is advisable to utilize HTML entities instead of inserting the symbol directly into the code.
* {
box-sizing: border-box;
}
.control-wrap {
width: 20px;
margin: 0px 10px;
border: 1px solid;
height: 30px;
}
.caret-wrap {
cursor: pointer;
font-size: 8px;
height: 50%;
text-align: center;
padding: 2px;
background: red;
}
.caret-wrap:hover {
background: #ddd;
}
.caret-wrap:active {
color: grey;
}<div class="control-wrap">
<div class="caret-wrap">
<span class="caret">▲</span>
</div>
<div class="caret-wrap">
<span class="caret">▼</span>
</div>
</div>Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...
I came across this fantastic header design > https://codepen.io/rm/pen/ldhon <. However, I noticed that when the window is resized, the text ends up overlapping. In the demo provided, resizing the window too much causes the issue to become apparent, ...
Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...
Looking to extract specific data from an HTML file using C# and HtmlAgilityPack. Here is a snippet of the HTML: <p class="heading"><span>Greeting!</span> <p class='verse'>Hi!<br> // Hello!</p>& ...
I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...
When I make an API call, I am receiving X and Y coordinates in the following format: x: "-0.0120956897735595703" y: "0.147876381874084473" To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" pr ...
I need to transfer the model of my webpage to my controller for processing. Once the information has been processed, I want to update the div with the id "savedText" to show "Billing Information saved successfully." Here's what my view looks like: ...
I have a set of radio buttons arranged like this: I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this: However, the current setup uses a min-width media query for layout breaking, which can lead to text ...
I created a custom script to replace all inline images with data URIs in order to minimize http requests and speed up loading times on mobile devices. Surprisingly, I noticed a decrease in loading speed. Could it be because the HTML file was larger (aroun ...
I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...
Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...
Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph. I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progres ...
Check it out in action right here: All I want is for the .news div boxes to gracefully float left and right using the handy cycle helper in Rails. However, the current output isn't quite what I had in mind: This is how I envision the layout should l ...
Currently, I am using a customized search feature in my React.js application. I am looking for a way to focus on an element within the search results so that I can navigate using arrow keys. At the same time, I need to keep the input field focused to conti ...
After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...
Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...
Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...
I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...
I am struggling to run a PHPWord script. When attempting to execute the sample example Text.php, it does not display anything. I have verified that the class is loading successfully. You can find more information in the documentation. If anyone has encou ...
I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...