Ciugk

Clash Royale CLAN TAG #URR8PPP Flexbox fill available space vertically Now in a flexbox row I can write <div layout="row"> <div>some content</div> <div flex></div> <!-- fills/grows available space --> <div>another content</div> </div> I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which have a fix height! I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox? bottom: 0; 2 Answers 2 So you can try this: flex-direction: column for the flex container. flex-direction: column flex: 1 for the element that needs to fill the remaining space. flex: 1 ...

Clash Royale CLAN TAG #URR8PPP How can you increment a number on scroll without having the scrollbar(actually scrolling)? So, imagine 2 sections/divs (both with width: 100% and height: 100% ). I only see the first section, the second section is to the right side of the screen, unable to be seen(overflow: hidden; on the body). width: 100% height: 100% Now, when I scroll, I want that second section to appear gradually, with each pixel I'm "scrolling". But, the problem here is, I can't actually scroll, thus properties such as this: window.pageYOffset , element.getBoundingClientRect() do not work. Basically, I want to increment a number each time I do a scrolling gesture, so I can assign that number to the second section( to modify its left property so it can come in the viewport ). And I don't know how to increment the number. window.pageYOffset element.getBoundingClientRect() This is a recreation of what I'm trying to accomplish: var secondSection = document.g...

Clash Royale CLAN TAG #URR8PPP Bootstrap 4 Modal - Menu a { color: inherit; text-decoration: inherit; } a:hover { color: inherit; text-decoration: inherit; } body { font-family: 'Roboto Condensed', sans-serif; } /* ---------------------------------------------------- */ /* navigation */ .navbar-toggler:focus, .navbar-toggler:active { outline: none; border: none; box-shadow: none; } .menu { padding-left: 10px; } .fa-bars, .menu { color: #006699 !important; } .navbar-text { color: gray; } .mainlink { font-size: 1.75em; line-height: 1.25em; font-weight: 400; } .sublink { font-size: 1em; line-height: 1.15em; } .navbar-toggle { margin-left: 15px; margin-right: 0; } .modal-nav-content { /* width: 100%; */ height: auto; } .modal-nav-body { margin-top: 10em; } .modal-nav-body p { color: white; margin: 0; padding: 0; padding-top: 6px; padding-bottom: 6px; /* width: 100%; */ } .modal-nav-body h5 { color: white; line-...

Clash Royale CLAN TAG #URR8PPP font face not working anywhere Can someone tell me what I'm doing wrong here ? @font-face { font-family: 'Knockout'; src: url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF70-FullWelterwt.woff2") format('woff2'), url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF70-FullWelterwt.woff") format('woff'), font-weight normal; font-style: normal; } @font-face { font-family: 'Knockout'; src: url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF28-JuniorFeatherwt.woff2") format('woff2'), url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF28-JuniorFeatherwt.woff") format('woff'), font-weight 100; font-style: normal; } .name { text-transform: uppercase; font-family: 'Knockout', Helvetica, Arial, sans-serif; font-size: 3em; line-height: 0.8em; } https://codepen.i...

Clash Royale CLAN TAG #URR8PPP placing of image and text at the bottom of the div I need to place an image and text at the bottom of the div which contains text. After following various posts about this question I have come up with this Fiddle HTML <div class="container"> <div class="row"> <div id="col-lg-4" class="col-lg-4"> <div class="cta-text"> <h3>Heading text that Can span 2 or 3 lines</h3> </div> <p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</strong></p> <div class="cta-text"> <table> <tr> <td><img src="~/img/icon2.png" /></td> <td valign=...

Clash Royale CLAN TAG #URR8PPP Restrict user input in HTML Hello guys I want to restrict user from entering date manually in an input field in HTML. I want user to select date from the date-picker provided to avoid input date entry Here is the my code in which I've used date-picker. <!DOCTYPE html> <html class="html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script> <script> $(function() { $("#datepicker").datepicker( { dateFormat:'dd-mm-yy', changeMonth: true, ...

Clash Royale CLAN TAG #URR8PPP Jquery hide / show div but to keep toggle link from “hiding” too I've just posted a question on stackoverflow about a hide/show issue I was having but that's been resolved, though this is a follow up on that as I have come across another issue. Ok, so I've got a sticky footer nav and there is a link just above the nav (also "sticky") that says "Toggle menu" ... when I click to hide the menu, the link that I've just clicked also hides. So basically there is no way to make the menu visible again cos the toggle button has also disappeared! Javascript: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#stickyfooter").show(); $(".show_hide").show(); $('.show_hide').click(function(){ $("#stickyfooter").slideToggle...

Clash Royale CLAN TAG #URR8PPP Global scope elements within ITCSS I've been developing front-end for 15 years. I may have become stuck in my ways, but in my front-end realm the architecture and the order by which scoped elements get developed is simple - setting aside pattern libraries, and the finer modular details. I'm in the process on refining a new boilerplate, and the closest I can find that suits my idealogy - its a mashup of SMACSS, OOCSS and ITCSS. But, for the sake of making my projects legacy friendly for other developers I selected ITCSS as the core framework architecture, and anything else will progressively turn into OOCSS. Fine. The one part I'm having difficulty decided on, is how/where to place my partials for the elements on the global scope, so header, main footer. A lot of developers prefer to use them only once throughout their markup, as it makes for a cleaner, more maintainable way of managing the front-end. So with regards to the ITCSS framework, whi...

Clash Royale CLAN TAG #URR8PPP Should I update normalize.css when I use boostrap css? I know that bootstrap 3.3.7 already includes normalize.css 3.0.3 But there is version 8.0.0 already. Should I add link to normalize.css 8.0.0 before link to bootstrap 3.3.7? 1 Answer 1 Bootstrap already included normalize.css check this By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Clash Royale CLAN TAG #URR8PPP How can I select ID and get a value of it in input data in this row? here is what I want to do. When I click the modify button, I wish div that contains role of 'ucomment' changes into in-line input form with its original value typed. But I can't even start with selecting the div. I thought the code here would work and could select what I aimed, but it didn't. $(this).closest("div[role='ucomment']") How can I select the div here? <ul id="comments" class="list-group"> <script id="commentTemplate" type="text/x-handlebars-template"> {{#each list}} <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-2" name="uid">{{uid}}</div> <div class="col-8" role="ucomment" name="ucomment...

Clash Royale CLAN TAG #URR8PPP Set Bootstrap 3 buttons to have same position in cards I am trying to align the Bootstrap 3 buttons on a horiziontal line like the below picture. Here is my demosite until now. I can align the buttons with setting a margin, but then it seems to be a puzzle to look good on all viewports. Is there a smart way to align the buttons? I have tried to delete so much code there is not relevant for the question. Therefore some css classes are not used in the below code: /* Track and trace */ .bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:table-cell; ...