I'm quite new to angular and I'm trying to get the text from the input field to wrap in the circular div so that the text does not go outside the border. Any help would be greatly appreciated here is my code - thanks!
HTML:
<div ng-app>
Add Information <textarea ng-model ="input" maxlength = "120" class = "textinput" </textarea>
<div class="textcircle">
<span id="text">{{input}}</span>
</div>
</div>
CSS:
.textinput{
height: 15%;
width: 40%;
margin-left: 5px;
}
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
}
#text{
padding: 1em;
text-align: center;
margin-left: 10px;
margin-right: 10px;
display: block;
}
UPDATE - I have changed the HTML/CSS and gotten the text to wrap well around the circle, but if a word is too long it moves outside the circle. Is there a way to limit the length of a word inside the div?
See an example with this fiddle:
http://jsfiddle.net/Gj7tL/16/
This should work!
http://jsfiddle.net/D2TL3/
Basically needed to change <span> to a <div> for text wrapping purposes. Created an inner circle for #text to wrap with.
Good Luck!
this has nothing to do with angular itself, it can be done by css:
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
overflow: hidden;
}
I´ve just added the "overflow: hidden" in your css class.
http://jsfiddle.net/gztR6/
Not really an angular question (as that part seems to be working fine), more about CSS.
try this:
#text {
display: block;
padding: 0 30px
}
Filling text in a circular area with CSS is definitely an inexact science.
Related
I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.
I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.
The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.
How can I achieve this?
**** Updated with HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.
if your CSS div height not expanding to fit content or wrapping content.
Just use a simple trick.
before the closing tag of the message-box div add a div with class cl
<div class="message-box"><div class="cl"></div></div>
Now in your Css Give this style .cl{clear:both;}
by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.
I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.
If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>
I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter
I have a small problem about div and input floating:
This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?
div.box {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 5px;
}
div.box>div.element {
background-color: #00B5B5;
display: inline-block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
padding: 2px 8px 2px 8px;
border-radius: 5px;
line-height: normal;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width: 8px;
}
<div class="box" id="box-ins-group">
<div class="element" id="1">prova</div>
<input type="text" id="group-input">
</div>
I have tried everything but still not working :( sorry for my bad english
-- Jquery code:
var counter = 0;
$('#group-input').keypress(function(e) {
if(e.which == 13) {
if($('#group-input').val().length > 3) {
$( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
$('#group-input').val('');
counter++;
}
}
});
counter is a variable
You need to set float: left on the input, and then change this in your js:
$( "div#box-ins-group" ).append
to:
$( "input#group-input" ).before
The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.
It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.
Seems that the pills are floating but the input is not. Try this (if you haven't already):
div.container div.edit-local div.form table tr td>div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width:8px;
float: left;
}
I need to show lines in my text-area to make it look a like notepad. I have a single text-area only. The below notepad is for reference.
Here's an idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/
In short: set a background-image and set line-height to whatever line height the image is using.
You can do this with CSS styling, based on your image, you can do this:
textarea#area {
width: 300px;
height: 400px;
padding: 0 0 0 20px;
line-height: 30px;
background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px
}
See the example fiddle here
This should get you started:
HTML
<textarea class="text">some text</textarea>
CSS
.text {
background: url(http://i.stack.imgur.com/UfzKa.jpg);
height: 664px;
width: 495px;
line-height: 29px;
padding-top: 136px;
padding-left: 120px;
}
Demo http://jsfiddle.net/ptpgb/4/
Try this one as well
<style type="text/css">
textarea {
background: url(/source/notebook.png) repeat-y;
width: 600px;
height: 300px;
font: normal 14px verdana;
line-height: 25px;
padding: 2px 10px;
border: solid 1px #ddd;
}
</style>
Hope this helps.
Adding a background image via CSS should work.
textarea{ background-image:url(notepad.png); color:ff0000; }
look at here
You can check try
<textarea class="notepad"></textarea>
.notepad {
background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
width: 600px;
height: 300px;
font: normal 14px verdana;
line-height: 25px;
padding: 2px 10px;
border: solid 1px #ddd;
}
http://jsfiddle.net/FzFaq/1/