css

CSS Tooltips line break

我只是一个虾纸丫 提交于 2021-02-11 14:17:54
问题 I've text to show inside a tooltip on hover of an icon. The tooltips width need to be: max-width:300px if the text fit in one line and less than 300px , adjust to text width if the text need many lines, the tooltip width need to be 300px How can I define the .tooltip .content-tooltip to work like describe before ? I've tried using white-space: nowrap; and some word-break ... .tooltip { position: relative; margin-right: 5px; display: block; text-align: center; width: 75px; padding: 5px; border

Bootstrap 4 - word wrap text without change the height

自古美人都是妖i 提交于 2021-02-11 14:14:24
问题 Coming from: Twitter Bootstrap Button Text Word Wrap How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example: <div class="container"> <div class="row"> <div class="col-sm"> <button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button> </div> <div class="col-sm"> <button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button> </div>

Applying highlighting effect to text through replace() (Django 2.1)

余生长醉 提交于 2021-02-11 13:55:23
问题 I am writing a custom template filter that highlights the keyword put into the search engine in the search results page, just like in Google search results. Code for custom filter: register = template.Library() @register.filter @stringfilter def highlight(value, search_term): return value.replace(search_term, "<span class='highlight'>%s</span>" % search_term) The filter doesn't change the targeted word's CSS class into <span class='highlight'> . Instead, the output displayed text in the

Canvas Javascript FloodFill algorithm left white pixels without color

☆樱花仙子☆ 提交于 2021-02-11 13:55:16
问题 I have been working on a drawing app like paint. I am in the part of the floodfill and I am using and algorithm that I found on internet, however, it left some white pixels near the line of the figure without color, detecting what happens, I found that those pixels are not white, but its a color very close. I tried putting the alpha value of those pixels on 1, in case that those were like a transparent color, but it doesn't works. There is an example of the problem: There is my code, it's a

Draw lines between circles css

半腔热情 提交于 2021-02-11 13:53:41
问题 I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/qBEqGpr, in some way it works but when you resize the page the height of the line doesnt match to the circle, any ideas of how can i make it responsive? all the magic is in the :before td:nth-child(2) { vertical-align: baseline; } td:nth-child(1) { display: flex; justify-content: center; margin-right: 28px; width: 42px; height: 42px; border: 1px solid #999999; border-radius: 100%; text-align: center;

How to use margins in CSS Firefox animations

不打扰是莪最后的温柔 提交于 2021-02-11 13:50:17
问题 I have an animation: @media (max-width: 768px). {.fptext {color:white; font-weight: bolder; position: relative; bottom: 450px; font-size: 0px; left: 100px; text-size- adjust:none;}} @media (max-width: 768px). {.fptext {animation: fadeout 30s ease forwards;animation-delay: 0s;padding:0px;-moz- animation:fadeout 30s ease forwards 0s infinite }} @keyframes fadeout{ from {font-size: 0px;} to {font-size: 45px;}} @media(max-width: 768px) {.textwidget>.fatext{ animation: bigger 30s ease forwards

how to calculate height of scroll content

◇◆丶佛笑我妖孽 提交于 2021-02-11 13:48:25
问题 I'm developing Hybrid app using ionic-3 . I want to display vertical line in center of the page and my page have dynamic data so we can't set height of this line. I have display view of my page in below image. I have put div and set as absolute and give border left with 100% height but when i scroll line is no longer. So i just want to calculate height to scroll content and i'll set it dynamically. Let me know if you have better solution for it. Thank you. 回答1: Create Viewchild for your

Can i use Enzyme's .hasClass feature with react components importing css files?

落爺英雄遲暮 提交于 2021-02-11 13:47:10
问题 i am currently setting up a test environment and come across a problem, that all my calls to .hasClass return false. Current Setup: My react components import scss files with an import statement. For example: import styles from "./text.scss"; To test the components i had to define the moduleNameMapper in the jest.config.js file like so: moduleNameMapper: { "\\.(scss|less)$": "<rootDir>/__mocks__/styleMock.js" }, I think that the moduleNameMapper is kind of responsible for the problems, since

Create a preview of html page in html page

Deadly 提交于 2021-02-11 13:40:59
问题 I need to create an html page containing preview or scaled view of some html pages. I tried to implement this using iframe and scaling the iframe. By display it is looking good.But even after iframe is scaled it takes the width and height of iframe content. Is there any solution for this? <html> <head> <style type="text/css"> #viewCollasheRow1 { table-layout: fixed; width: 100%; height: 35%; } .viewCollasheColumn1 { width: 445px; height: 192px; padding: 0; overflow: hidden; }

Center stacked-images horizontally

大兔子大兔子 提交于 2021-02-11 13:37:58
问题 I need to display 4 images centered in the screen. I need this images must be stacked one of top another. I resolved the stack part: .img-container { position: relative; } .img-container .top { position: absolute; top: 0; left: 0; z-index: 1; } <div class="img-container"> <img src="icon-1.png"> <img class="top" src="icon-2.png"> <img class="top" src="icon-3.png"> <img class="top" src="icon-4.png"> </div> <div > <img class="img-responsive center-block " src="another-image-below.png" style=