Here’s an idea (sandbox example link). Include a phantom div in your footer component that represents the footer’s position that other dom elements will respect (i.e. affecting page flow by not being position: ‘fixed’;). var style = { backgroundColor: “#F8F8F8”, borderTop: “1px solid #E7E7E7”, textAlign: “center”, padding: “20px”, position: “fixed”, left: “0”, bottom: “0”, height: …
Did you try putting overflow-y:overlay in the parent div? It works for me in chrome. This page says it works in safari, too.
You can’t directly ‘count’ total numbers of elements in CSS, so there’s no way to only apply the class if there’s 2 or more divs (you’d need JavaScript for that). But a possible workaround is to apply the class to all divs in the td… td > div { margin-bottom: 10px; } … and then …
Just add position:sticky to th & td first-child. th:first-child, td:first-child { position:sticky; left:0px; background-color:grey; } <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css” rel=”stylesheet”/> <table class=”table”> <tr> <th>TIME</th> <th>Company</th> <th>Company</th> <th>Company</th> <th>Company</th> <th>Company</th> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>11:40 </td> <td>Maria Anders</td> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>11:40 </td> <td>Maria Anders</td> …
Just switch up the borders (see fiddle): HTML <b class=”caret-right”></b> CSS .caret-right { border-bottom: 4px solid transparent; border-top: 4px solid transparent; border-left: 4px solid; display: inline-block; height: 0; opacity: 0.3; vertical-align: top; width: 0; }
Add this to style the prev / next arrows: .swiper-button-prev { background-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d%3D’M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z’%20fill%3D’%234c71ae’%2F%3E%3C%2Fsvg%3E”) !important; } .swiper-button-next { background-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d%3D’M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z’%20fill%3D’%234c71ae’%2F%3E%3C%2Fsvg%3E”) !important; } Where “4c71ae” is the color you want to use in HEX.
Use outline:0 and then set border-bottom input { outline: 0; border-width: 0 0 2px; border-color: blue } input:focus { border-color: green; outline: 1px dotted #000 } <input placeholder=”Text” type=”text” />
What if: <asp:Button ID=”Button1″ runat=”server” CssClass=”test1 test3 test-test” /> To add or remove a class, instead of overwriting all classes with BtnventCss.CssClass = “hom_but_a” keep the HTML correct: string classname = “TestClass”; // Add a class BtnventCss.CssClass = String.Join(” “, Button1 .CssClass .Split(‘ ‘) .Except(new string[]{“”,classname}) .Concat(new string[]{classname}) .ToArray() ); // Remove a class BtnventCss.CssClass …
Like this? Live Demo Relevant CSS: #container:hover .inner { opacity: 0.8 } HTML: <div id=”container”> <div id=”left” class=”inner”></div> <div id=”right” class=”inner”></div> </div> Irrelevant CSS: #container { width: 300px; padding: 30px; overflow: hidden } .inner { width: 40%; height: 250px; background: #ccc } #left { float: left } #right { float: right } Truly Irrelevant CSS: …
Why not try something like this? $(‘#menu li a’).on(‘click’, function(){ $(‘#menu li a.current’).removeClass(‘current’); $(this).addClass(‘current’); }); JSFiddle