When using the contenteditable attribute on a div and have inserted a HTML element span in, for some reason the caret goes inside the space next to the text:
To replicate, hit backspace to remove the question mark at the end on the example I provided
.pill {
background-color: #EEEEEE;
border: none;
color: black;
padding: 0px 4px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
font-size:0.8em;
z-index:100;
}
<div style="resize:none; overflow: auto; border: none" contenteditable="true">
is your email still <span class="pill" contenteditable="false">Email</span>?
</div>
Related
I might be missing something basic. It's so simple:
.items {
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
jsFiddle
Moving the class from the anchor to the div will make it (the border) disappear all together.
Well, your <a class="lamgswitch"> does not have any content... The float: left; makes the <div class="items">float out of it...
So try to remove it, and replace it with display: inline-block;, as the div is a block component, and you placed it inside an inline component (a)...
.items {
display: inline-block;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
Place the <a> tag inside the <div> rather than the other way around.
.items{
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px ;
}
.langswitch{
border: 3px solid #86D1DA;
border-radius: 5px;
}
<div class="items">Italiano</div>
Hope this helps.
Technically, placing the <a> inside the <div> is the semantically correct way to do this as described in the other answer.
If you really HAVE to do it this way, you need to change the display of the <a> tag from inline to inline-block.
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
Ok, I have two buttons that need to sit side by side. I got that. But the right 'button' is sitting higher than the left one. Why? I believe that it is because of my right 'button' has two lines of text with it. My proponent will not budge on this button having two lines of text. Does anyone know how to do this better?
I put my code in jsfiddle: http://jsfiddle.net/energeticpixels/k7awcfts/
Here is my code:
<div id='tonyzBTNs'>
<a id='regCourse' class='btn' href='https://cloudlms.slhc.serco-na.com' target='_blank'>Register for Course</a>
<a id='regTest' class='btn' href='https://www.atrrs.army.mil/atrrscc/courseInfo.aspx?fy=2016&sch=910&crs=4E-F33%2f645-F17+(DL)&crstitle=ARMY+ELECTRICAL+EXPLOSIVE+SAFETY+(CERT)&phase=' target='_blank'>Register for Exam<span style="font-size: 10px;"><br />(after completing the course)</span></a>
</div>
And the css:
#tonyzBTNs {
margin-top: 20px;
margin-bottom: 20px;
}
#tonyzBTNs .btn {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#tonyzBTNs #regCourse {
background-color: #9EB95C;
border: 2px solid #708542;
border-radius: 10px;
padding: 10px;
color: black;
}
#tonyzBTNs #regTest {
background-color: #C54F4D;
border: 2px solid #6A4346;
border-radius: 10px;
padding: 1px 10px 1px 10px;
color: white;
display: inline-block;
}
Depending on how the rest of the site is layed out, Using float: left; in your #tonyzBTNs #regCourse will probably solve your issue.
Updated Fiddle
#tonyzBTNs .btn {
...
vertical-align: top;
display: inline-block;
}
Demo
When I add
overflow:hidden
to any of the buttons on my page, it creates 13px of margin at the bottom of the button. When I remove the above CSS, the margin disappears, however some content inside the button overflows.
How can I remove the margin at the bottom, while keeping the
overflow:hidden
CSS style?
WITH overflow:hidden
WITHOUT overflow:hidden
, however, the Facebook logo overflows into the next button (it is a custom font)
CURRENT BUTTON CSS:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
CURRENT BUTTON HTML:
<a class="btn btn-fb btn-xl" id="login_fb"><span class="icon-socialfacebookvariant"></span>Log In</a>
CURRENT FACEBOOK LOGO CSS:
[class^="icon-"], [class*=" icon-"] {
overflow:hidden;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size:2em;
line-height:0;
font-family: 'icomoon';
position:relative;
top:-1px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
vertical-align:middle;
}
// Facebook logo from a font
.icon-socialfacebookvariant:before {
content: "\e9e3";
}
Thanks Jaunt for the help.
Although your idea is the most logical, it's not very nice when editing!
Luckily I happened to come across a simple fix to my problem!
All I had to do was add vertical-align:top to my button CSS, and wham! it works!
Thanks for your help :)
It's because you have white-spacing between the HTML elements. This snippet is with the white-spacing:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
And this one is without:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
<div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div>
There is a notable difference and I believe this is where your mysterious margin is coming from.