Gtjkyu

Creating React component vs using CSS styling I have created a tab menu using CSS styling that I use in several different spots in my ReactJS app. .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; margin: 0; padding: 0; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button:disabled { background-color: #ccc; cursor: default; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top:none; } This is in a index.css file that sits with all my .js files. Within my React code I use it like this, as an example: index.css .js <table><tbody> <tr className="tab"><td> <button onClick={() => this.openTab(0)}>Tab 1</button> <button onClick={() => this.op...

HTML webpage with all css in Angular app I'm new to Angular and trying to resolve problem concerning displaying HTML website in my Angular application. The webpages with all resources like images, css files etc. are stored on external server. Sites contain text, images, own styles, css etc. Everythink works fine when I open such website in web browser. When I trying to display such page inside my application a lot of problems aren't resolved. I used innerHtml to diplay page in application: <div [innerHtml]="content"></div> All links are being changed to be direct before displaying. Text and images display but styles aren't applied. Maybe the problem is connected with the fact that links to .css are located in <"head> block? Hope sb had problem like me and can help :) Thanks in advance. I think you need to use a Sanitizer (angular.io/api/platform-browser/DomSanitizer) – John Jul ...

No rounded corners on React-Bootstrap-NavItem I want to have the same look as the pills style but without the rounded corners pills this is what i have so far <style type="text/css">{` .nav-pills > li + li { border-radius: 0 !important; } `}</style> <Nav bsStyle="pills" justified activeKey={this.props.currentStep} onSelect={this.updateCurrentStep.bind(this)} > <NavItem eventKey={1} title="Template">Template</NavItem> <NavItem eventKey={2} title="Edit">Edit</NavItem> <NavItem eventKey={3} title="Preview">Preview</NavItem> </Nav> How do I set the border-radius of my NavItem to 0? It does appear in the rules of the li item but it does not change anything. border-radius NavItem li 2 Answers 2 There are many different (and arguably better) ways to handle...

Select dropdown color changing [duplicate] This question already has an answer here: I have created a sample dropdown list (the code is below). I want to change the font color of the "Pick a Country" which is displaying in the select option: The default text color is black and I want to change it to red. <select id="select-id"> <option value="" selected="">Pick a Country</option> <option value="">India</option> <option value="">Sri Lanka</option> <option value="">Sweden</option> This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. You need to integrate JavaScript/Jquery script for this task. I think you want to show red color only for selected country? – sohan verma Jul 2 at 9:51 ...

Centering tooltip? I'm trying to get my tooltip to be at the top & center of my page, regardless of window size and screensize. I have the following, but my tooltip appears on the top left corner: <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <style> area { display: inline-block; } </style> <script> $(function() { $( document ).tooltip({ position: { my: "center bottom", at: "center top", } }); }); </script> Can you please post you HTML code or create a jsfiddle? Using your JS code I can't reproduce the issue. –...

How to give a colour property to top and bottom border line of a row I was wondering how to colour the top and bottom border line of each rows, and disable the sides colour of it, I have attached a pic of what I am trying to achieve. Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question? – Andrzej Ziółek Jul 2 at 9:36 3 Answers 3 Use border-bottom/top (means border only to top and bottom ) border-bottom/top top bottom td, th { border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; } Learn here:https://www.w3schools.com/css/css_border.asp See example: table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border-bottom: 1px soli...

Getting the Height of Navigation bar dynamically in CSS My website is based on React and react-strap. Well, I had my .header-overlay to cover the whole entire background in .header . But what is happening here is that because of the .navbar , the .header-overlay sticks out of .header vertically. .header-overlay .header .navbar .header-overlay .header I figured that using calc(100vh - heightOfNavigationBar) would resolve this. But, I couldn't find any way to get the height of .navbar by dynamically. Is there any way to resolve this? (navbar is embedded in react-strap) calc(100vh - heightOfNavigationBar) .navbar CSS CODE: .navbar{ font-size: 20px; } .header { background: url("../images/headerbg.jpg") no-repeat 50% 50% fixed ; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; height: 100vh; } .header-overlay { background-color: rgba(31, 31, 31, 0.4); height: 100vh; } HTML C...

FIX for Too many js and css libraries [closed] I have classifieds website which a web development company developed for me. However he has used too much of CSS libraries(around 23) and too much of script libraries(20). The website is very slow and consuming too much band width. Can someone help me out?? How to keep only those scripts in the scripting file and only those CSS properties that I have used in CSS file? I know coding enough to fix the website. Thank You. Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question? – Andrzej Ziółek Jul 2 at 9:11 ...

Bootstrap carousel doesn't slide I absolutely do not understand why the bootstrap carousel code doesn't work at all with me. It's strange, i took the example which is on the bootstrap website, just customized some little things it should be work. I think it's a problem of version of bootrstrap or jquery but both of them are the last ones i found so i do not see where the problem come from. If anyone could help me, please ^^ #carouselReactions { margin-top: 25px; display: flex; flex-direction: row; justify-content: center; width: 100%; height: auto; } #carousel-left-control { width: 5%; display: flex; justify-content: center; align-items: center; } #carousel-text { width: 50%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } #carousel-text h3 { color: #0C0C0D; } .carousel-inner, .carousel-item { position: relative; text-align: center; } #carousel-right-control { width: 5%; dis...

Angular 2 or 4 or 5 or 6 drag and image upload is not working? [closed] I want angular 2 or 4 or 5 or 6 drag and upload image examples. Drag and drop image upload is not working properly and the image is not visible properly. It is an blur image. Please look at the below image. ngx-Dropzone-wrapper . ( Code is here ) The image is coming like this. If the container width is less also it is working like this only. Please look at the example, link Please look at this example link, If u uplaod any image here, it is displaying as an blur image only. Please help me how an I fix this. If I expand the box size also, i want the image as same clarity. And it should be visible properly. Any other examples are there to drag and upload the image in angular? can anyone please help me to do this? This question appears to be off-topic. The users who voted to close gave this specific reason: Can you share your code as a MCVE on StackBlitz? – aloisdg ...

Color transition not working with setTimeout. Element should appear smoothy [duplicate] This question already has an answer here: Color transition works, if I don't hide the element and then make it appear. const name = document.querySelector(".name"); setTimeout(() => { name.classList.remove("hide"); name.classList.add("color-blue") // name.style.color = "blue"; }, 2000) .name { background-color: orange; display: inline-block; padding: 5px; transition: color 10s; color: transparent; } .color-blue { color: blue; } .hide { display: none } <div class="name hide"> Lebron James </div> If I don't use the class hide and I don't remove it later, the transition works. By hiding it, it does not work. No clue what's going on Thanks for your help This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. ...

Border is not drawn around the picture in CSS I have a question regarding drawing a border around an image uploaded on the HTML. This is my code in HTML: .imagec { display: block; margin-left: auto; margin-right: auto; border: black block 2px; } <img class="imagec" src="https://via.placeholder.com/100x100"> I do not know why a border is not drawn around my picture:( In addition, I cannot draw a border around my HTML page too :( 4 Answers 4 You have to do it as below: border: 1px solid black; Insted of border: black block 2px; Learn here:https://www.w3schools.com/css/css_border.asp .imagec{ display: block; margin-left:auto; margin-right:auto; border: 2px solid black; } html{ border: 2px solid black; } <img class="imagec" src="https://material.angular.io/assets/img/examples/shiba1.jpg"> that what you mean??? ...

Size attribute for an input field not being honored Taken directly from W3Schools: Definition and Usage The size attribute specifies the width of an input field. For <input type="text"> and <input type="password"> , the size attribute defines the number of characters that should be visible. For all other input types, size defines the width of the input field in pixels. <input type="text"> <input type="password"> So.. If that is true why is my field <input type="text" size="2"/> wide enough to display 5 CAPTIAL MMMMM's ? <input type="text" size="2"/> people hate w3schools so much..i think they are "bad" but not that "bad" – Benny Tjia Jul 14 '11 at 20:52 Update...

Looking for a good floating lable implementation that works with Bootstrap Does anyone know of a good floating label implementation that will work with Bootstrap on all browsers. I found one from Material Design (code below), but I would like the textbox to have a border and the placeholder to transition into something like a fieldset's legend. Any implementation that works on all browsers would be appreciated. Here is the Material Design stuff: .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } <div class="container my-5"> <div class="row"> <div class="col-md-6 mx-auto"> <div class="form-group"...

Angular incompatibility with html attributes I have an imported css template written on bootstrap, and want to use it inside Angular app. CSS are imported from index.html Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping. Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example data-background="assets/images/slider_1.jpg" to img src="assets/images/slider_1.jpg" , it will be loaded and shown from the first time. Example of map plugin. Doesnt show nothing. <div class="maps-container map-widget m-b-25"> <div class="map" data-addresses="[4.4, -4.4]" data-icon="assets/images/map-marker.png" data-zoom="16" data-street-v...

Bootstrap - custom alerts with progress bar I am trying to customize the bootstrap 3.3.7 alert class in order to add a progress bar and inline items to achieve something like this ( the dotted line is just to demonstrate that items are aligned ): alert However, I have problem in fitting the progress bar at the bottom of the right part with a width of 100%. Also, I have problem to adjust the height of the left part to 100% and ajust the icon in the middle. width height I am not sure if I am using the correct css strategy, but this is what I have done so far: /* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left: 0; right: 0; margin: 0 auto !important; width: 480px !important; } .leftPart { display: inline-block !important; height: 100% !important; width: 32...

Bootstrap 2.3 CSS Responsive left with a white space on the right I'm creating a website (and I'm a noob at this). I'm working on the functionality portion of design and i'll have someone do graphics later. Currently when it goes into responsive (mobile view) it leaves a 2px margin on the right that is movable on a mobile browser (and scrollable). I can't for the life of me get rid of that. if I turn on overflow-x: hidden, then it does become non scrollable but still movable. I want that extra space to go away. I don't see it defined as padding in any of the css. Using Bootstrap 2.3 I've encountered the same problem, it had something to do with the navbar. – Pier-Luc Gendreau Jun 9 '13 at 1:24 6 Answers 6 Solved by adding ...

Font changed when generate pdf with wkhtmltopdf on online server I created pdf with wkhtml2pdf with Arial font, while generate on local does not matter. But at the time of generating in online, font changed to be Times New Roman. Code CSS .div1 { font-family: Arial; font-size: 10px; padding-left: 5px; padding-top: 0px; } 1 Answer 1 Try this .div1 { font-family: Arial!important; font-size: 10px; padding-left: 5px; padding-top: 0px; } Hope it will help. 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.