I am using Angular, TypeScript in WebStorm. I am trying to put a close icon on top of a span.
The first picture shows the result I obtained until now, in the second one I made it look as I would using Photoshop:
I was thinking to use span but I hope there is a more intelligent way to do that?
Here is my actual css:
NOTE : the dark blue side is in class "badge" the light grey is "general"
.general {
display: inline-block;
font-size: small;
color: black;
padding: 0.8em 0.7em 0 0.7em;
background-color:#EEEEEE;
line-height: 1em;
position: relative;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 0 4px 4px 0;
margin-bottom: 8px;
}
.badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color:#405061;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
border-radius: 4px 0 0 4px;
margin-bottom: 8px;
}
Related
I have created two chat bubbles which one of them I need to be left aligned and other one I need to be right aligned .As of now my css grow both till the end like below image .
As of now I do not want to hardcode the width and want the bubble to grow with chat text and both one should be left aligned and other one should be right aligned like below:
CSS:
.speech-wrapper{
padding: 5px 6px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #075698;
color: #FFF;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.chatbox_other{
height:auto;
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #DCDCDC;
color: #000;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.name_other{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #1970b0;
}
.name_other1{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ba006e;
}
.name_other2{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #007670;
}
.name_other3{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #3b0256;
}
.name_other4{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #00512b;
}
.name_other5{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #a91024;
}
.name_other6{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #b8471b;
}
.name_other7{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #7f1c7d;
}
.timestamp_other{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #fff
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ffffff;
}
.triangle.left-top:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 22px solid;
border-color: #DCDCDC transparent transparent transparent;
z-index: -1;
}
.triangle.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -10px;
top: 0;
bottom: auto;
border: 32px solid;
border-color: #075698 transparent transparent
transparent;
z-index: -1;
}
.alt{
margin: 0 0 0 60px;
}
HTML:
<div class="speech-wrapper">
<div class="chatbox triangle right-top alt">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div>
</div>
<div class="speech-wrapper">
<div class="chatbox_other triangle left-top">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span>
</div>
</div>
</div>
</div>
I have tried uisng float left but while reducing the windows size the chat started overlapping on eachother
For testing out try below link
https://codepen.io/rajesh-kumar-dash/pen/KbvqQX
I think using float: right; for the right bubble and for the left bubble: float: left; with width: auto; should work
The "dirty" way to do it is by adding a after the divs just to clear the float:
<div class="speech-wrapper"><div class="chatbox triangle right-top alt"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
<div class="speech-wrapper"><div class="chatbox_other triangle left-top"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
The cleaner way to do it is called "Clearfix". I suggest you take a look on these two links to understand it and use on your code:
https://www.w3schools.com/css/css_float.asp
https://css-tricks.com/snippets/css/clear-fix/
If you want the size of your box as large as the text in it, you have to set "display: inline-block";
To make sure your box wont get bigger then a certain size use "max-width".
With "overflow-wrap: break-word" your text breaks if it reaches the max-width.
When i hover over the question mark icon, the tool tip gets hide behind the header tab.
Look the attached image!!!
enter image description here
i need the tool tip to come above the header tab without getting hide.
This is my CSS enter image description here
.showmeonhover { display: none; }
.label-input100:hover .showmeonhover {
display: inline;
width: auto;
background-color: white;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px 0;
border-color: #555 transparent transparent transparent;
bottom: 125%;
background-color: #555;
/* Position the tooltip */
position: absolute;
margin-left: -100px;
margin-bottom: -18px;
padding-left: 6px;
padding-right: 5px;
z-index: 200;
font-size: 8px !important;
text-transform:capitalize !important;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
font-size: 100%;
}
Sorry for my english.
You can try to define the z-index in your css-class.
like:
.headerTab{
z-index: 0;
}
.showmeonhover{
z-index: 1;
}
Here is my CSS for the element shown in the attached image.
.ClsInpBestAnz {
border-radius: 0px;
margin: 5px 5px 0px 10px;
width: 45px;
color: #822;
text-align: right;
display: block;
font-size: 1.8em;
}
How can i resize the buttons?
Thank you for your help..
You can find the updated css here
.ClsInpBestAnz {
border-radius: 0px;
margin: 5px 15px 0px 10px;
width: 50px;
color: #822;
text-align: left;
display: block;
font-size: 1.8em;
}
https://jsfiddle.net/ajrek251/
Alternatively, you can take a look at the Jquery UI spinner plugin.
This is how my input and button looks like. The CSS code looks like this:
button._searchfrontpage
{
margin: 0 auto;
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
}
.sp-module_searchfrontpage input[type="text"] {
background: #f0dbc5;
height: 53px;
width: 50%;
margin: 0 auto;
border-radius: 6px;
margin-bottom: 40px;
line-height: normal;
color: #444;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
}
I dont seem to figure out a way to drag the grey button into the right side of my input box. Are there someone who can figure me an idea to work from?
EDIT: after implementing the code #Jai gave me, it looks fine, but when i make the browser smaller, it gets out of its place and looks like this:
Obviously its like that, because the input width is 50%. are there any solutions for that?
For your div:
.sp-module_searchfrontpage{
/* other CSS as is*/
position: relative;
}
Now the button:
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
But you have to make sure that the parent div has same height as the input and button does and relatively positioned.
If it is not possible then you can wrap them into another div or better with label and style it with same height property of the input and button but the div still needs the relative position and button should be absolutely positioned. I would do it with label:
<label>
<input type="text" />
<button>search</button>
</label>
Then in the CSS:
.sp-module_searchfrontpage label{
width: 100%;
height: 53px;
position: relative;
}
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
I want to put a button that is fixed on the right hand side of my webpage however as it stands right now, there is too much spacing between each letter.
Here is my html
<i class="style-switcher-btn">B
l
o
g
</i>
And this is the css class I am using:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
}
The letters are too spaced out as of right now and I would like them to be more compact... Any suggestions?
Just add line-height: 17px; to your CSS. Or whatever number is best for your needs
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
line-height: 17px;//ADD THIS
}
DEMO
Not 100% sure what you're asking but play around with letter spacing:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
letter-spacing: 2px;
}