We Keep Coding

Restrict the size of contenteditable

I'm building a program where you can insert copied HTML from your Webbrowser into the program and then edit it by using a contenteditable div tag, but the copied HTML overflows the div and doesn't apply the style in relative to my div but to the whole screen, is there a way to prevent that?
document.getElementById("HTMLMD").contentEditable = html;
#container-HTMLMD {
overflow: auto;
background-color: white;
height: 100vh;
width: 50%;
}
#HTMLMD {
padding: 5px;
}
<div id="container-HTMLMD">
<div id="HTMLMD" spellcheck="false"></div>
</div>
Result (the top bar should only take half of the width as the other elements):

Solution:
I inspected the html contents and saw that the overflowing items were items with position: absolute and position: fixed, I fixed the problem by first setting #HTMLMD { position: relative } which fixed the problem for the items with position: absolute, then I wrote the JS script:
let children = inner.getElementsByTagName("*");
children.forEach((e) => {
if (e.style.position === "fixed") e.style.position = "absolute";
});
which sets all items with position: fixed to position: absolute, which is definitly not an optimal solution but it works in my case.

Dynamically increase and decrease an input text box size depending on another selector width

I have an input text box which has some padding to it. I also have a wrapper class selector which is used next to that input text box. I am trying to remove set padding from the input text box and make that space dynamic so that the element size would (especially width) increase and decrease depending on the screen size (i.e. Mobile or Large view as large screen) without effecting the wrapper.
The text box looks like the following. a, c, d, e are buttons which appear dynamically. So the space for b here should expand if the there is only one button on the right and decrease if there are all the buttons on the right.
|____|________________________ |_____|_____|_____|
a b c d e
so the css class selectors that I have includes b and another one includes all the c, d, e (wrapper).
I assume this can't only be done through CSS. Any suggestion?
CSS:
.input {
position: relative;
width: 100%;
max-width: var(--grid-main-max-width);
padding: 1.188rem 2.9rem 1.188rem 4.5rem;
margin: 0;
font-size: 16px;
border: 1px solid var(--color-gray);
border-radius: 0.375rem;
outline: 0;
}
.wrapper {
position: absolute;
top: 0;
right: 1.5rem;
bottom: 0;
display: flex;
justify-content: center;
}
HTML
<div>
<input class="input">
<div class= "wrapper">
<button>c</button>
<button>d</button>
<button>e</button>
</div>
</div>

The solution only needed to count the width of the input text box and the wrapper and assign the difference as a padding to the right of the input text box. The following little change was added to an onInput event.
document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth;
And also needed to use Media Queries for #media (--large-viewport) / #media (--medium-viewport) to assign different padding for the input. as #Scott Marcus mentioned in a comment.

Lets say you have div child blocks for those child elements or you can specify some class.
div:first-child:nth-last-child(1){
width: 100%;
}
div:first-child:nth-last-child(2),
div:first-child:nth-last-child(2) ~ div{
width: 50%;
}
div:first-child:nth-last-child(3),
div:first-child:nth-last-child(3) ~ div{
width: 33.3%;
}
div:first-child:nth-last-child(4),
div:first-child:nth-last-child(4) ~ div{
width: 25%;
}
//and so on
Source refer to here
Also if you want to modify other elements you can use
div:first-child:nth-last-child(2) > .someClass{
style:goesHere
}

(UPDATE: I figured out you used a wrapper element, and that a is'nt a label but a button. But this answer is easily adaptable to your question.)
You can use the calc function provided by CSS. Given this piece of HTML (I joined all the elements to remove side effects of the blank characters; we can fix it in an other way but I wanted to keep the answer simple):
<html>
<head>
</head>
<body>
<article id="demo">
<label>a</label><input type="text" placeholder="b" /><button>c</button><button>d</button><button>e</button>
</article>
</body>
</html>
This piece of CSS allow the input text element to fill the available space.
article#demo {
/* the width (80vw) includes border and padding */
width: 80vw;
}
article#demo label {
/* to make label resizable */
display: inline-block;
width: 30px;
}
article#demo button {
width: 20px;
margin: 0;
padding: 0;
background-color: #f0f0ff;
box-sizing: border-box;
/* see above */
}
article#demo input[type="text"] {
box-sizing: border-box;
/* text input width = 100% minus other items */
width: calc(100% - 30px - 3 * 20px);
}
You can set the width of article#demo using any unit (em, ex, etc.) it should work.
In your final design, use box-sizing:border-box to set the whole element, including borders and padding, within the CSS width. Otherwise, you'll have to adjust the calc parameter.
If you put left or right margins, count them too.
If you use font-dependent units (em, etc.), the same font-family and other font-related CSS entries have to be set - implicitly or not - for all the concerned elements.
Working fiddle with a little interactive test here.

How to show a div at the current caret's position in a textarea? [duplicate]

This question already has answers here:
How can i position a dropdown at cursor position inside a textarea?
(2 answers)
Closed 9 years ago.
I've seen a few questions like this but can't find a solution. I have a textbox. When the user is typing along, if they press #, I'd like to show a list of items they can select from, at that caret's position (i.e. the place in the textbox where the next character typed will appear, not the location of the mouse cursor).
JSfiddle: http://jsfiddle.net/LR8pe/
Code:
$(".textarea").bind("keypress", function (e) {
if (String.fromCharCode(e.keyCode) == '#') {
$(".list").show();
} else{
$(".list").hide();
}
});
I have the basic mechanics down, but showing/hiding at the position of the caret is where I'm stuck.
I'm using jquery/knockout, but pure JS is fine with me.

Here is a purely CSS approach:
http://jsfiddle.net/p774G/2/
Surround your textarea and list in a container:
<div class="spacer"></div>
<div class="list-container">
<textarea class="textarea"></textarea>
<ul class="list">
<li>item</li>
</ul>
</div>
Modify your CSS so that the textarea is a fixed size, then position your list at the bottom of it:
textarea
{
width: 300px;
height: 70px;
padding: 3px;
}
.list {
list-style: none;
background-color: gray;
display: none;
position: absolute;
top: 76px;
left: 0;
margin: 0;
padding: 0;
border: 0;
}
.list-container
{
position: relative;
}
.list li
{
padding: 5px;
width: 294px;
}
EDIT:
I would not recommend spawning this box where the mouse cursor is, as you do not know where the user will have his or her cursor. It could be off the page for all you know. This is a bad user experience. Instead spawn it below the textarea as I did in my answer.

Using your jsFiddle: http://jsfiddle.net/zCLu9/1/
Basically, I created 2 global variables responsible for holding the mouse's X and Y coordinates which are updated on mousemove so they're always (well, almost always) accurate. Then those coordinates are used to set the offset of the .list element whenever it's supposed to be displayed.
I also set the element's position to absolute in the CSS.

Centering a label

I have a div with some text inside and absolute position. I can set the left or the right, but is there a way to set the center, so Div's text would expand in both directions.
So far I could only think about creating exstremly long div and centering text inside.

If your div is positioned absolutely, you can simply set it's left property so that it's centered.
Example:
HTML:
<div class="outer">
<div class="inner">Some text...</div>
</div>
CSS:
.outer {
position: relative;
width: 900px;
}
.inner {
position: absolute;
width: 500px;
top: 0;
left: 200px;
}
If you don't know the width of the inner element, you'll have to rely on javascript.
Here's an example using jQuery:
var $el = $('.inner');
$el.css('left',
( $el.parent().width() - $el.width() ) / 2
);
and here's the fiddle: http://jsfiddle.net/aa93G/ . Play around with the text inside .inner, and you'll see that the text stays centered.

to centralize inner text and inline elements use text-align: center in the parent element.
If you're dealing with block elements, you should use margin: auto in the element itself. but you must first set a width for the element, otherwise it will just occupy the whole width of the parent.

How to refresh the size of a div after adding elements to it

I have an element like this:
<div id="content" style="border: 2px solid black">
</div>
And through JQuery I add some new stuff:
$("#content").append($('<div></div>').addClass("box"));
where
.box { margin: 10px; padding: 10px; border: 1px solid black }
But the outer div does not resize when I do this, so I get an inner box that is sticking out of a solid outer box. How can I get the outer box to resize itself when I add this inner box?

Correct the selector if it's not a typo
$("#content") // id="content" (correct)
$("content") // tagName = content
And change the display of the div to inline-block
#content {
display: inline-block;
}
Then the div will not occupy the whole row.

try this:
js
$('#content').append('<div class="box"> </div>');
html
<div id="content" style="border:2px solid black;overflow:hidden;">
</div>
I hope his help!

#content is not resizing, since it's width is probably set in your CSS.
Either make it wider, or specifically size it appropriately.
Looks like #content must be over 40px wide, since the inner div has 10 margin and 10 padding, which is 20 on the left and 20 on the right.
So, something like:
$("#content").css("width","100%").append($('<div></div>').addClass("box"));
Or better yet, set up your CSS at the right width to begin with:
#content { width: ... ; }
If you are floating .box within #content then set the overflow of #content to auto(or hidden), otherwise the outer box doesn't "see" the floating inner boxes:
#content { overflow: auto; }

In my case I added:
#property { overflow: auto; }
and now size of elements is being recalculated when I show or hide elements.