I am wondering how the special text box in readthedocs.org is made.
For instance in:
I think there is much more than tweaking the css file, and I would really like to create one on my own.
Thanks in advance!
EDIT: I know the overall box comes from the note directive. However, my question is: how do they make this "!" mark? I cannot find the clue in the css file.
It's an FontAwesome icon
div {
background-color: skyblue;
padding: 3px 10px;
}
.fa-exclamation-circle {
color: white;
}
span {
color: white;
margin-left: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<span>Note</span>
</div>
Related
I used this fiddle directly in my code. The idea is to create a circular button.
https://jsfiddle.net/yeyene/59e5e1ya/
This code is for bootstrap 3 though. When using it referencing bootstrap 4, the button is square rather than circular. Here's an example:
https://jsfiddle.net/NibblyPig/fsedc5p6/
The CSS that it is applying is:
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
As with all buttons I set the classes to btn and btn-success (or similar) as well as this class too.
Checking the inspector, it is definitely applying this, however something must be overriding or changing this behaviour because it still appears square.
I am unable to find any explanation or working code via google that will produce a circular button in bootstrap 4. Is there any advice?
It is because the .btn-success was overriding with a border-color. You can target them both using .btn-success.btn-circle. Also try to override the hover styles.
Added CSS:
.btn-circle.btn-success {
border-color: transparent;
}
.btn-circle.btn-success:hover {
border-color: transparent;
}
JSfiddle Demo
Need to Update -webkit-appearance: none;
Check the fiddle https://jsfiddle.net/f46ab37x/
If you are using <button></button> then Just add border-radius:50%!important and padding: 1.375rem 0.75rem!important; to .btn.
.btn {
border-radius: 50%!important;
padding: 1.375rem 0.75rem!important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
I have a requirement to create an icon as shown below.
I have tried as shown below.
.html
<ion-content padding>
<div style="background:lightblue;width: 50px;height: 50px;border-radius: 50%;">
<ion-icon name="heart"></ion-icon>
</div>
</ion-content>
Plunker is here
Q1: Is this the correct approach to create this kind of icon appearance?
Q2: How can I make it same as above image?
Q3: After that, I need to use that icon any place on any component.If I use margins to center the heart icon, hope it'll not work on any place no? In other words, I need to use it as a single unit.
Hope you'll give a feedback for this.
.heart-icon {
background: lightblue;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
color: #FFF;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="heart-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
Hope it is what you want to achieve. You can use ionic icon instead of font awesome.
scss
.heart-icon {
background: lightblue;
border-radius: 50%;
color: #FFF;
}
and for HTML
<ion-icon class="heart-icon" name="heart" item-start></ion-icon>
I am trying to display text under my image but it wont work. My image displays but not my text.
The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted
<div id = "folderlist">
<a href="">
<image src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
</div>
My CSS is as follows:
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
#folderlist a {
margin: 15px;
border: 8px solid transparent;
display: inline-block;
opacity: .8;
color:black;
}
#folderlist a:hover {
opacity: 1;
border-color: red;
}
.captionText {
display: block;
position: relative;
width: 100px;
height: 20px;
text-color:black;
border: 2px solid red;
}
I have tried different variations by removing placeholder using an input area and even just using <p> tags.
Any help would be much appreciated.
I have tried also the following:
<a style='text-decoration: none; color: orange;'>
<img src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px">
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
The problem is with
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
Setting the font-size to 0 tends to make text invisible :)
The code is fine. Just do one thing.
Put # in the anchor tag.
<a href="#">
<image src="cool.jpg" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
else there is no problem in code
A textarea is a form input. It's not something you use for just displaying text. Use a 'p' tag instead
Joshua Comeau is correct - the markup doesn't make sense.
<a> is an anchor tag. It is only allowed to contain certain things. Form elements, such as <input>, <select>, and <textarea> are not among them.
Textareas are the large text editing areas that you expect in a mail system. You don't use them to display text.
You can just put that text there not wrapped in anything at all. That's probably what you want.
If you just need something to attach style rules to, use a <span>.
If what you're trying to do is to get a rectangular area to put text into, you want a <div> instead.
<textarea> within <a> is not legal, and will never work in a compliant browser.
The code in your "I have also tried" is actually perfectly valid, and what you want to do.
Sometimes I see two entries for the CSS 'color' attribute active on a single element, even when one has !important. The one without !important is taking precedence though, as it should (I am trying to force the element to color: white). See screenshot:
Thanks!
UPDATE: added html markup
<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
<span class="x-badge" style="display: none;"></span>
<span class="x-button-icon x-hidden" id="ext-element-1109"></span>
<span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>
.peacekeepers-edition is set on the first element inside the body, #playview is a distant descendent.
Regardless of the specificity of the rule all proprieties from the CSSOM will appear in the inspector rule view. The fact that the "color:#ccffff" is not crossed/underline is just an inspector bug.
BTW, you overqualified your selectors: .preacekeepers-edition #playview will have a specificity of 1|1|0|, that is way more that you should have. Adding !important will make things hard to manage later.
I'm making some assumptions about your markup (because you haven't provided any), but I think it's fairly safe to say that this is your issue.
Assuming your markup is something like this...
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Your first selector targets the button element...
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
but your second selector targets an element that is a descendant of your button...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
Your !important rule is irrelevant because your selectors are targeting different elements.
Easy fix; add this line after line 769...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
Broken example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Working example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Using bootstrap, I created input-group with a button and input type='file'.
It is working fine everywhere except IE9. On IE9 the browse button is being cropped from right side.
Demo: http://jsbin.com/alESiBo/6/edit
Code:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
</div>
Output:
IE 9.0.8112.16421
Chrome 31.0.1650.63 m
IE Version with snapshot:
What you are seeing ( the grey part ) is the 'browse..' part of the file upload in IE9. This is 'just the way it is' for the bootstrap css. As other answers have shown, if you do not like this, yeah, just need to have a look into making your own.
Add this in your head tag to prevent further mismatches though...
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
Most common is to set this control hidden ( I agree it always looks awful and inconsistent ) and 'trigger' it from your own fake button.
Lots of great links from other answers.
Like Rob Sedgwick said in his answer this is just the way the control looks in IE, and styling it is not really allowed.
But… you can cheat: make the file input disappear, and create your own fake input. Then redirect the relevant events using JS.
HTML
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
<span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>
CSS
.form-control[type="file"] {
margin-bottom: -100%;
opacity: 0;
}
.form-control-overlay {
/* style, if you want */
cursor: pointer;
}
Javascript
var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");
// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
// remove file path; it's a fake string for security
fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};
// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
fileFieldEl.click();
};
Run the code: http://jsbin.com/alESiBo/16/edit
add one more class :
bootstrap.css:3296
.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}
try this may be it will be help you out.
Your code seems to work fine in IE9.
http://fiddle.jshell.net/XCN83/1/show/
So, make sure your compatibility mode is not on. (see red circle in the attached image)
If not, some other css you have is affecting it, use the dev tools inspector to find styles applied to the file input box and it's parents working your way up.
I will suggest to use your own custom CSS to give same look and feel across the browser and same behavior across the browser. I have used similar approach to take care of this issue in my project. Following are same details also link of JSBIN for live demo.
HTML Code:
<!--Import button-->
<div class="fileinput-button import-modal-select-file-btn" title="Import file">
<!--Name of button -->
<span>Upload</span>
<!-- Upload file control-->
<input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
<!-- Any hidden field; Generally needed when upload button is part of form-->
<input type="hidden" name="request" value="value"/>
</div>
CSS Code (Please customize as per your need):
.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}
.import-modal-select-file-btn {
width: 50px;
}
Following is live JSBIN link for your reference.
http://jsbin.com/EWIGUrEL/1/edit
Hope it may help.