Hello stackoverflow community I need help with my script. I'm using NicEditor and I'm trying to make it resizeable like text-area. But when I made div: resize:both it can be resized in height, but not in width.
Here is script:
<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; overflow-y: auto; overflow-x: hidden;">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>
What can I do to make this editor resizeable like text-area? Here is jsfidle: https://jsfiddle.net/JVhpJ/11/
What I did first is to create a div called editorcontainer and inserted the values you used in your html for the container of NicEditor.
By adding width:auto and adding display:inline-block and removing all the overflow values, the div will now on adapt to the width and height of the children.
Below the example:
<script src="js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
.nicEdit-main {
resize:both;
border:1px solid grey;
}
.editorcontainer{
width:auto;
border-width: 0px 1px 1px;
border-style: none solid solid;
border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
display:inline-block;
}
<div class="editorcontainer">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>
Also below find your modified Fiddle:
https://jsfiddle.net/JVhpJ/13/
Its a lil bit hackish, but this is what I did:
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas();
$("#container").children().css("width", "100%");
$("#container").resizable();
$("#textarea1").prev().css("height", "70%");
});
.nicEdit-main {
height:90%;
width:98% !important;
}
textarea {
width:100%;
}
#container {
overflow:hidden;
}
Here is the JSFiddle demo
Hmm, maybe something like this (main div style: overflow:auto; resize:both)?
<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; resize: both;
overflow: auto;">
<p>vw v wev wv vw ev</p>
</div>
Related
How can I draw a thin horizontal line without using the <hr> tag ?
I tried this:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.
Per this css-tricks discussion, you could give this a go:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
You can use it but there is not much difference.
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png">
<span class="btnText">Cancel</span>
</button>
I try to put a image and text inside a button and make it center.
How can I do it? I
This should work. Using align="middle" in the img tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
Try this,
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
<span class="btnText">Cancel</span>
</button>
There are two ways.
Add a vertical-align: middle; property to the following class.
#submitCancel img {
border: 1px black solid;
vertical-align: middle;
}
or
add a align="center" attribute to the image tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="center">
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
I have the following HTML:
<div id="main">
<div id="calendar">
<div class="column" id="time_slots">
</div>
<div class="column" id="day1">
<div class="route_container">
<div class="date"></div>
<button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
</div>
</div>
And the following CSS:
.label
{
width:20px;
}
.table
{
font-size: 1.2em;
}
#main
{
border-style: solid;
border-width: 1px;
border-color: black;
width:97%;
height:900px;
margin:auto;
overflow: auto;
white-space: nowrap;
}
h2
{
font-size: 24px;
}
#calendar
{
padding:1%;
}
.column
{
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:17%;
height:1000px;
display: inline-block;
overflow: auto;
padding:5px;
font-size: 0px;
}
.header
{
padding:0;
margin:0;
text-align: center;
font-style: bold;
}
.route_container
{
height:100%;
display: inline-block;
font-size: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:100%;
overflow: auto;
padding:5px;
font-size: 0px;
}
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
display:inline-block;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}
.column#time_slots
{
width:5%;
min-width:5%;
max-width: 10%;
}
.date
{
text-align: center;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
}
.column button
{
display:block;
width:100%;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
font-size: 16px;
}
.full_time
{
display: none;
}
.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
border-style: solid;
border-width: 1px;
border-color: black;
width:90%;
height:20%;
font-size: 28px;
text-align: center;
padding:5px;
}
I am adding another div with the following Javascript:
$(".add_route").click(function(){
var truck = $(this).parent().find('.truck').length
truck += 1;
var w = $(this).parent().width();
$(this).parent().animate({width:(w+405)}, 1000);
$(this).parent().parent().animate({width:(w+425)}, 1000);
$(this).parent().append('<div class = "truck" id="'+$(this).parent().parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +' routes</p></div>');
$('#'+$(this).parent().attr('id')+'_route'+truck).hide();
var route_num = $(this).parent().find('.truck').length;
var route_w = (100/route_num)-1;
$('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);
$(this).parent().parent().css("padding", "5px");
console.log($(this).parent().parent().css("padding", "5px"))
$(this).parent().find('.truck').css("margin-right", "3px");
});
And I get the following result:
As you can see, the added div (the one with "there are 2 routes"), is quite a bit lower than the other div. To make matters worse, when I change the contents of this HTML by expanding the divs (ts8-10, etc) and a border:
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
The offset is so much worse. It is practically at the bottom of the first div (the one with JSmith).
I understand this these are set as "inline-block" and I have tried to make adjustments, as you can see, and nothing seems to work. I have checked to make sure that there are no extra margins or padding issues, at least none are showing when I use the Chrome web dev tool.
Can someone tell me what is going on here? What am I doing wrong? How can I fix this?
inline-block items are aligned based on the vertical-align property, which defaults to baseline. Add vertical-align:top; to .truck.
(This is a more flexible, intuitive solution than using a table-cell hack. inline-block will still behave as you expect it to after that.)
In css change the display :inline-block to table-cell, It will work
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
/*display: inline-block;*/
display: table-cell;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}
I am having the below code for display custom scrollbar. Here some background is showing, instead of this I need display a 1px thin line image.. How can I do this? I am using the TinyScroller
Css:
#wrapper_1 {width:99%; height:600px; padding:2px}
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto}
#scrollcontent_1 {position:absolute; width:94%; z-index:200}
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)}
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat}
.buttonclick_1 {}
Code:
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller_1" class="scroller_1"></div>
</div>
</div>
</div>
<script type="text/javascript">
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1');
</script>
Well if you are in Chrome you can use plain ol' CSS:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-button {
display: none;
}
Demo: http://jsfiddle.net/maniator/ysgBy/
Site to check out: http://css-tricks.com/custom-scrollbars-in-webkit/
According to the doc
http://www.scriptiny.com/2009/09/javascript-scrollable-div/
I think your html is not correct. Try something like :
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller"></div>
</div>
</div>