I have a div that s being used as an input box.
<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div>
This is the CSS
.div_input {
background-color: white;
outline:1px solid darkgray;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 100px;
}
When you type in the box with characters that are longer than the width the following happens:
On Chrome it acts just like I would like it expands but retains it visual text. On Firefox Quantum it will overrun the other elements to the right.
How can I prevent this behavior? I have tried wrapping it in a fix of fixed width but that does not change anything.
Use word-break: break-all; so all words break when they hit the limit. Something like this:
.div_input {
background-color: white;
outline:1px solid darkgray;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 100px;
word-break: break-all;
}
<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div>
Here you have it on JSFiddle: https://jsfiddle.net/c61askwy/1/
Thanks to VXp for pointing out the snippet didn't have the solution hehe
Related
I'm trying to change the appearance of code sections on my Joomla 4 website using the Cassiopeia template. A sample HTML source looks like this:
<p>Trying to format a code section below.</p>
<pre><code>This is code line 1, starting at position 1
This is code line 2, starting at position 1 as well
This is code line 3, starting at position 1 as well
</code></pre>
<p>This text follows the code section.</p>
Without adding user CSS, this is displayed as follows:
All lines are left-aligned, as expected.
I'm adding the following CSS to the user.css file:
pre {
display: block;
width: auto;
max-height: 600px;
overflow: auto;
background-color: #eee;
border-radius: 10px;
border: 1px solid;
border-color: var(--cassiopeia-color-primary, #111 );
scrollbar-color: #ccc transparent;
margin: 20px 40px;
padding: 30px;
word-wrap: normal;
}
pre > code {
font-size: 1.0rem;
text-indent: 0;
color: #111;
white-space: inherit;
margin: 20px 20px;
}
The CSS (mostly) works as desired, i.e display the code in a bordered box with grey background. However, the first code line is indented by 2 characters. See here:
I tried to find the cause using Firefox Web Inspecting Tools (shift-crtl-i), but can't seem to find out. What is causing that 2 character indent?
Please update your code a bit, remove margins from styles for the code element and make it a block element:
pre {
display: block;
width: auto;
max-height: 600px;
overflow: auto;
background-color: #eee;
border-radius: 10px;
border: 1px solid;
border-color: var(--cassiopeia-color-primary, #111 );
scrollbar-color: #ccc transparent;
margin: 20px 40px;
padding: 30px;
word-wrap: normal;
}
pre > code {
display: block;
font-size: 1.0rem;
text-indent: 0;
color: #111;
white-space: inherit;
}
The <code> element is inline by default.
I am having trouble making a contenteditable look like a textbox on my site. Does anyone know what is the font on the picture - I have tried a lot of them an none matches well.
The contenteditable is above and the textarea is bellow .. i would like to know what is this font?
Here is the code as well
#mw {
-moz-appearance: textfield-multiline;
padding: 11px;
}
.mw1 {
padding: 11px;
}
<div id="mw" contenteditable>I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
<textarea id="aid" name="inputText" class="mw1">I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.</textarea>
Still having trouble with trying to match fonts and color? See this Snippet for details.
SNIPPET
.textBox { font: 400 13px/1.428 'Courier New'; color: rgba(0,0,0,1); }
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
padding: 5px;
border-radius: 4px;
border: 2px solid #ddd;
padding: 4;
overflow: hidden; overflow-y: auto;
height: 100px;
background-color: #FFFFFF;
resize: both;
overflow: auto;
width:300px;
height: 100px;
font: inherit;
color: inherit;
}
.maintextarea {
padding: 5px;
border-radius: 4px;
border:solid 2px #ddd;
background-color: #FFFFFF;
width:300px;
height: 100px;
font: inherit;
color:inherit;
}
<section class="textBox">
<div id="textarea" contenteditable>
In this demo, I have wrapped a <section> element around both boxes. It has a class name of .textBox.
This is the CSS:
.textBox {
font: 400 16px/1.428 'Courier New';
color: rgba(57,64,68,1);
}
</div>
<textarea id="firsttextarea" name="inputText" cols="100" rows="20" class="maintextarea">
Now for the 2 editors #textarea and .maintextarea we add the following CSS to both of them:
font: inherit;
color:inherit;
</textarea>
</section>
i think the font is Consolas. but as for making the div appear like a textarea, you can try
<table bgcolor=buttonshadow cellpadding=3 cellspacing=3>
<tr>
<td bgcolor=buttonhighlight>
<div id="mw" style="
font:consolas;
width:400px;
height:200px;
overflow-y:scroll;
overflow-x:hidden;" contenteditable>
I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
</td>
</tr>
</table>
Just adjust the Width and or Height to the way you like it.
This would work as long as you don't have a super long string fragment that has no spaces (ie a hyperlink). if you do then that super long word may be cut off.
You can remedy that by changing
overflow-x:hidden;
to
overflow-x:auto;
but that would add a horizontal scroll bar if it is needed. Alternatively you can add a "-" and a space somewhere in the Long word to seperate it into two or more lines
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
I can't figure out how to write HTML code for the picture below:
The CSS looks like this:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 90%;
width: 90%;
top: 0;
left: 0;
margin: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: HelveticaNeueBold;
}
The text is <p> visa fler bästsäljare </p> <h3>+<h3>.
The code I have gotten help with so far is:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
The only issue is that this code does not create the image as I posted. URL to the website URL. Scroll down a bit. The browser I am testing this on is Google Chrome.
remove the
.borderbox {
height: 90%;
}
then the dashed border should work as you expected.
I think this might be a solution: http://jsfiddle.net/e7Levykn/
I don't think you can style border with one argument. You would have to use
border-style , border-color, border-width.
EDIT: Nvm about the border thing. Your css-code should work, it works in the jsfiddle. Maybe your elements in html don't have the right classes
Use css border-style property.
.selector{
border-style: dashed;
}
or like this
.selector{
border:2px dashed #F1F1F1;
}
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>