Contenttools how to make an area not editable - javascript

I have a container div in which everything is editable
<div data-editable data-name="main-content">
</div>
Which works fine as expected, but inside of that div there are multiple sections which all can be edited as well (due to the parent div having the editable tag) but I want to have a section (a p tag) that isn't editable whilst all the other content in that div is editable.
Apart from removing data-editable from the parent div and adding it to each individual p tag (to which there could be hundreds or even thousands) how do I block just one p tag from being editable?
I would think there is a tag like data-none-editable but I can't find anything in the docs unless I'm missing the obvious.
EDIT:
For clarification the library I'm using (as per the title) is ContentTools which can be found here: http://getcontenttools.com/

You can use this if you still face problem please let me know
.first{
height: 300px;
border:1px solid red;
}
.wrapper{
width: 500px;
height: 300px;
position: relative;
}
.second{
background-color: green;
width:200px;
height: 100px;
left: 0px;
right: 0px;
top: 10px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
<div class="wrapper">
<div contenteditable="true" data-name="main-content" class="first">
</div>
<div contenteditable="false" class="second">
</div>
</div>

Related

CSS Flexbox - Popup is still Beholden to Parent Flexbox

I have some basic code that allows for a popup to appear when something is hovered over. Codepen: https://codepen.io/Sean713/pen/GRBpVOZ
.row {
height: 100px;
border: 1px solid red;
display: flex;
}
.subdiv {
border: 1px solid green;
position: relative;
}
.popup {
display: none;
position: absolute;
left: 100px;
border: 1px solid black;
}
.hover:hover+.popup {
display: inline;
}
<div class="row">
<div class="subdiv">
<p class="hover">Hover</p>
<div class="popup">
<p>Surprise I am a popup</p>
<p> and so am I</p>
</div>
</div>
</div>
Since .row is a flexbox, it makes sense that .subdiv should compress its width to its content, as I have not specified otherwise.
However, the popup that appears when I hover is having unexpected behavior. The actual text inside the p tags is wrapping and is only as wide as the longest word in the sentence, it seems to be acting almost like .subdiv. I'm not sure why this is the case or why the fact that .row being a flexbox is influencing this popup. I would like for the p tags inside the popup to full block and allow the popup to wrap around that.
Edit: Adding white-space: nowrap; to the p tag fixes it, but I don't understand why the wrapping issue occurs in the first place.

Scroller isn't displaying on the screen

I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!

How can I put a div block below another lined up vertically when they are touch and are on the same line?

Here is the html and css code:
HTML:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
CSS:
#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}
#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}
So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.
Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this:
right after touch
My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch:
want
I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.
This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/
<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
CSS
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}
#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}
For this, a good option would be to use a container with a specified width and text-align: center. Then en lieu of floats, set the boxes to be display:inline-block elements. As inline elements, they will then follow whatever text alignment their parent container specifies.
HTML
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS
#container{
text-align:center;
width: 100%;
}
#container .box {
width: 300px;
height: 150px;
background-color: #75A9F9;
margin-top: 50px;
border-radius: 5px;
display: inline-block;
}
https://jsfiddle.net/qacnL2yr/

CSS AngularJS make a div grow dynamically when it has starting static width

I'm using AngularJS to add divs to a section, and I want the div to have a static start width and to grow dynamically when I add more divs, How can I do this?
This code doesn't work:
<body ng-app="plunker" ng-controller="MainCtrl">
<section>
<div ng-repeat="div in divs track by $index">
<div class="square"></div>
</div>
</section>
<button ng-click="add()">add</button>
</body>
section {
border: 1px solid red;
overflow: hidden;
padding: 10px 0;
width: 400px;
}
.square {
width: 100px;
height: 100px;
background: #000;
margin-right: 10px;
float: left;
margin-top: 1em;
}
Link for Plunker:
http://plnkr.co/edit/SqGXBh9zXK2P3LCIVOPG?p=preview
All you need to do is:
for section:
min-width: 450px; //min width of all blocks that inside your section
display: inline-block; //to make width "grow" with content
and for square:
display: inline-block; //instead of float, because float makes height to 0
http://plnkr.co/edit/azOKubY7b371u2Pt7JbD?p=preview
//note: I moved square class to parent node of ng-repeat, but it's not necessary, you just need to add display: inline-block; if you want to have previous structure.
You can accomplish this by also using float:left on the section:
section {
border: 1px solid red;
padding: 10px 0;
float:left;
}
And making the squares direct descendants, which will actually fill up the section:
<section>
<div class="square"ng-repeat="div in divs track by $index"></div>
</section>
Plnkr

Make floated element in column layout ride up to meet element above

Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle
make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle

Categories