I have a span element like so (I am modules.css hence the classnames look a bit strange) in a React component
<div className={`${styles["login-container"]}`}>
<span className={`${styles["a-icon"]}`}>Login</span>
</div>
Then in CSS the following
.login-container {
height: auto;
display: flex;
align-items: center;
gap: 5px;
}
.a-icon {
font-family: xyzFontLight;
height: 30px;
}
.a-icon::before {
content: "\e1ca";
font-family: xyzFontIcon;
margin-right: 5px;
font-size: 1.25rem;
}
The login Icon is created using a special customized font(these are custom fonts that I cannot share). The issue I am facing is that the icon & text don't line up.
How to get both of these inline?
Related
Below is the CSS and HTML for the custom cursors I have, when I apply the classes to divs the cursors do not show.
If anyone wants to take a look at the SVG file as well I've linked it here
* {
cursor: url(../assets/cdefault.svg), auto;
}
.noclick {
cursor: url(../assets/cno.svg), 8 8, move !important;
}
.select {
cursor: url(../assets/cselect.svg), auto !important;
}
.text {
cursor: url(../assets/ctext.svg), 8 8, move !important;
}
.itemtext {
width: 40vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px;
color: white;
}
.item {
width: 40vw;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
border-width: 0.1rem;
background-color: black;
border-color: white;
border-radius: 10px;
transform: scale(1);
}
.item img {
width: 40vw;
border-radius: 0.4rem 0.4rem 0rem 0rem;
}
<div class="item noclick" onclick="window.location = '/example/unavailable';">
<img class="noclick" src="example/example.png">
<div class="itemtext noclick">
<p class="title noclick">example<span> - example</span></p>
<p class="date noclick">example</p>
</div>
</div>
To clarify, the global cursor cdefault.svg, does show across the whole page, in this example the noclick class does not want to appear when hovering over the specified elements.
EDIT
Just as clarification, my cursors are all 16x16px and have worked when applied to classes individually. I have also tried using PNGs instead of SVGs but has not changed anything.
Please make sure the svg files are within 32 x 32px which is the size limit for most browsers. Otherwise the browser ignores your custom cursor file. There are similar answers for example here
Figured out what I was doing wrong! I shouldn't have been placing the comma after the svg url. Below is the fixed CSS
.noclick {
cursor: url(../assets/cno.svg) 8 8, auto;
}
Can someone help me with the following progress element of Element UI library:
Element UI - Progress link
I'm trying to reach for this result:
put the value at the end of each bar
Currently, having this:
with the following code:
HTML:
<el-progress :text-inside="true" :percentage="item.value" color="#6A7EC7" :stroke-
width="12"></el-progress>
CSS:
.el-progress-bar__outer {
background-color: transparent;
}
I've tried to do put the text div as relative like the following:
>>> .el-progress-bar__innerText {
color: $color-tremor-black;
position: relative;
left: 30px;
}
But the text is being cut when the value is close to the end.
What I'm missing? need to do?
Thank you.
I've decided to remove this component and build my own progress bar by using div and CSS.
Like the following:
HTML
<div class="newProgress">
<div class="progressBar" :style="{width:`${item.value}%`}"></div>
<span class="newProgressValue">{{item.value}}%</span>
</div>
CSS
.newProgress {
display: flex;
flex-direction: row;
width: 400px;
}
.progressBar {
width: 80%;
margin: 3px 0px 0px 10px;
background: #6A7EC7;
border: 1px solid #6A7EC7;
height: 12px;
border-radius: 50px;
}
.newProgressValue {
padding-left: 5px;
font-size: $font-size-small-plus;
}
I've couldn't find some information about Element UI library and its styles.
I'm still a novice at webdev and this is my first question here so please bare with me. I'm currently working on a website for my school and I'm trying to add a search box like this(with the search icon inside the box): click this
I'm following the search bar tutorial from w3schools, but their version is a bit different(search icon on the outside): click this
This is the html code for the search bar:
<input type="text" placeholder="Search..">
I want to put the search icon inside the box like the first picture, but the input tag is a empty tag, so I don't know how to put it inside. Please help me.
i have used font awesome for search icon, u can use local search icon, font awesome icons, material design icons or any icon source just use this below code.
.custom-select {
position: relative;
width: 250px;
outline: none;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: none;
padding: 0;
border-radius: 5px;
z-index: 555;
}
.custom-select-search-icon {
position: absolute;
z-index: 2;
height: 22px;
width: 22px;
right: 10px;
opacity: 0.5;
}
.custom-select-input {
padding: 0 10px;
border-radius: inherit;
width: inherit;
height: inherit;
background: transparent;
color: #051833;
}
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="custom-select">
<input type="text" placeholder="Search please" class="custom-select-input">
<i class="fa fa-search custom-select-search-icon"></i>
</div>
This should give you a basic idea of how it can be done:
document.getElementById('sb').addEventListener("click", function(e){
if(e.target.nodeName =='SPAN') {
let elem = e.target.children[0];
elem.focus();
}
});
.outer {
border: 1px solid gray;
padding: 10px;
border-radius:5px;
}
.outer img {
height: 22px;
width: 22px;
top:5px;
position:relative;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
input:focus {
/* removing the input focus blue box. Put this on the form if you like. */
outline: none;
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<span class="outer" id="sb">
<input placeholder="Search.."/>
<img src="http://assets.stickpng.com/thumbs/585e4ad1cb11b227491c3391.png">
</span>
I have the following html:
<span class="targetIcon"/>${targetInfo}
Here, the class targetIcon is:
.targetIcon:before {
font-family: 'FontAwesome';
content: "\f56f";
font-size: 2em;
float: left;
margin-right: 10px;
}
When value of targetInfo is: Drag and drop a file or click to browse, this resolves as:
However, when targetInfo is a little long and thus moves to new line, this resolves as:
The second image above (multi-line) is correct.
However, in the first image, the text is not centered after the icon. How can I position the text at the center of the icon?
I want the positioning of both elements to be decided based on whether the text is single line or multi-line.
You can achive this with Flexbox:
.targetIcon {
display: flex;
align-items: center;
}
.targetIcon:before {
font-family: 'FontAwesome';
content: "\f56f";
font-size: 2em;
float: left;
margin-right: 10px;
}
<span class="targetIcon">Drag and drop a file or click to browse</span>
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.