I add dynamic text to a tab(jquery ui tab) using a function based on onchange event of a combo box. The script works. The problem is it grows horizontal only. I don't need horizontal growth. Even though I have defined the max width, it doesn't concern it and grow horizontally.
I need to grow it vertically. that means to start appending to a new line when it reaches to the maximum width limit of the conatiner
from jquery UI(you can down load this)
<div id="myTabs">
<ul>
<li><span style="background:#85E085; color:#000; padding-top:0px; padding-bottom:0px;">OK</span></li>
<li><span style="background:#FFD6AD; color:#000; padding-top:0px; padding-bottom:0px;">Not Sure</span></li>
<li><span style="background:#FFB2B2; color:#000; padding-top:0px; padding-bottom:0px;">Too Difficult</span></li>
</ul>
<div id="a" style="padding-top:0; margin-top:0; max-width:200px;" >
</div>
<div id="b"></div>
<div id="c"></div>
</div>
<!--<script src="development-bundle/jquery-1.4.4.js"></script>-->
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.tabs.js"></script>
<script>
(function($){
$("#myTabs").tabs();
})(jQuery);
</script>
===========================================================
the script i wrote
newlink = document.createElement('a');
newlink.innerHTML = idname;
newlink.setAttribute('title', 'dsdsd');
newlink.setAttribute('href', '#'+idname);
newlink.setAttribute('class', 'k');
$("#a").append(newlink);
$(".k").css("padding-left","5px")
Try to put the css property white-space: normal in divs that have max-width. This will make the div respect the line breaks.
Related
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
I have the following HTML structure:
<div id="wrapper">
<div id="some-id"></div>
"this is some texxt"
<div id="some-id-2"></div>
</div>
How can I remove the text with CSS?
Can't think of a very good way to do so, but
#wrapper {
font-size:0;
}
Would work.
Notice, that if the other two divs have text anywhere inside them, you will need to redefine new font-size for them, since it will be overwritten.
Not sure if this will work on every browser, but you should give it a shot.
#wrapper {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, and has much better performance than changing the font size.
More here - Replacing the -9999 font
Its not sexy - but it works - and I am assuming that you want the two divs, but not the text in the middle. If you can only affect the content with CSS (and not javascript / jquery) - then you could try the following. Force the background of the second div to be white and move it up by 1em using position relative / top -1em. That way it will cover over the offending text.
As I said - not sexy and I do NOT recommend using this - far better to find a way of actually modifying the content of the #wrapper div.
#some-id-2{
background:white;
display:block;
position:relative;
top:-1em}
<div id="wrapper">
<div id="some-id">text content 1</div>
"this is some texxt"
<div id="some-id-2">text content 2</div>
</div>
I recommended you to use jQuery code to remove the text definitely from the client side, because may be you will have some issues with some browsers.
If you decide to use jQuery you can place the following code in your page:
$(document).ready(function(){
var divContent = $("#wrapper").find("div");
$("#wrapper").html(divContent);
});
if the wrapper div can contain more HTML tags for example:
<div id="wrapper">
<div id="some-id">aaaa</div>
"this is some texxt"
<div id="some-id-2">bbbb</div>
<p>Hello world</p>
</div>
You can combine HTML tags in the find jQuery function by separate them by comma:
$(document).ready(function(){
var divContent = $("#wrapper").find("div,p");
$("#wrapper").html(divContent);
});
This is more save and clean
I'm trying to dynamically resize the width of one DIV (the target) based on the clientWidth of another (the source).
Note: The CSS Style of the source DIV is width:auto;
1st problem: It doesn't work... it must be my syntax or something..?
2nd problem: It needs to dynamically resize as user changes browser window (recall script on window resize). How ???
Javascript:
<script>
// START RESIZE WIDTH SCRIPT
function resizetarget(){
var resizesource = document.getElementById('section');
var sourcewidth = resizesource.style.clientWidth;
var resizetarget = document.getElementById('collpilewrapper');
var targetwidth = resizetarget.style.clientWidth;
targetwidth = sourcewidth;
}
</script>
CSS:
.section{
width:auto;
max-height:75%;
top:60px;
bottom:60px;
margin-bottom:60px;
left:280px;
right:0px;
position:absolute;
background-color:#FFF;
white-space:nowrap;
display:inline-block;
}
.section li{float:left; display: inline; }
.pane{
overflow:auto;
clear:left;
position:relative;
width:100%;
height:100%;
}
#collpilewrapper{
min-width:900px;
min-height:100%;
float:left;
background-color:#69C;
display:table-column;
}
HTML:
<!--start content-->
<div class="section">
<div id="pane-target" class="pane">
<ul class="elements" style="width:16000px">
<!--box 0 -->
<li>
<!-- START landing group -->
<div id="collpilewrapper">
<div id="collpile1">
<img src="images/coll-missy-714x737.jpg" /></div>
<div id="collpile2">
<img src="images/coll-girls-602x476.jpg" /></div>
<div id="collpile3">
<img src="images/coll-toddler-421x447.jpg" /></div>
</div>
<!-- END landing group -->
</li>
<!--box 1 -->
<li>
<!-- START missy group -->
<div id="adbox">
<img class="largead" src="images/storypic-na.jpg" />
</div>
<div id="adbox">
<img class="largead" src="images/videostill1.jpg" />
</div>
<!-- END missy group -->
</li>
</ul>
</div>
</div>
<!--end content-->
jsfiddle
I used jQuery since I find it easier to work with. There's a couple of problems I noticed. You were targeting the element by ID but section is a class, not an id. style.clientWidth isn't officially supported from what I saw when I googled it. It looks like it's something that IE used to use (honestly I don't know anything about it).
jQuery
function resizeWidth(source, target){
var sourcewidth = $(source).width();
$(target).css({
"width": sourcewidth
});
}
$(window).resize(function() {
resizeWidth("#section", "#collpilewrapper");
});
Whatever code you place inside of this will run when the window has been resized.
$(window).resize(function() {
});
resizeWidth() is a function that I made myself. It takes in a source and a target.
width() will give you the width of an element.
css() allows us to directly change the CSS.
Lastly, you'll notice that it doesn't look like the large blue box is re-sizing. That's because you've put a minimum width of 900px. Also, the event will only fire when you re-size the browser. It won't do anything when you first load up a page.
I'm trying to implement a fixed header bar which works in all type of browsers and mobile browsers.
In the below code, is it possible to avoid the attribute style="padding-top:100px" in the div element of the content. I don't want to manually compute the 100px of distance.
<html>
<body>
<div id="xheader" style="position:fixed; width:100%; top:0; left:0; right:0; z-index:1000; border:solid 1px red">
<p>FIXED BAR</p>
</div>
<div id="xcontainer">
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
<p>Line4</p>
<p>Line5</p>
<p>Line6</p>
<p>Line7</p>
<p>Line8</p>
<p>Line9</p>
<p>Line10</p>
<p>Line11</p>
<p>Line12</p>
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
<p>Line4</p>
<p>Line5</p>
<p>Line6</p>
<p>Line7</p>
<p>Line8</p>
<p>Line9</p>
<p>Line10</p>
<p>Line11</p>
<p>Line12</p>
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
<p>Line4</p>
<p>Line5</p>
<p>Line6</p>
<p>Line7</p>
<p>Line8</p>
<p>Line9</p>
<p>Line10</p>
<p>Line11</p>
<p>Line12</p>
</div>
</body>
</html>
Use class for that div with
padding-top: 100px
otherwise no.
Because the header element is taken out of the flow of the document (by position:fixed;) you do need something to push the content below the header. But you can use a more flexible unit than pixels:
padding-top: 1.5em;
Check out this JSFiddle.
Since ems are relative to the parent's font size, the padding here will scale up or down a different font size. Or you can just use % to specify the padding.
I am going to do that with jQuery:
var xheaderHeight = $('div#xheader').height();
$('div#xcontainer').css('padding-top',xheaderHeight);
Thanks for your responses.
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
/* #box {position:absolute;top:0;right:0;} */
/* #box {position:absolute;top:0;left:0;} */
/* #box {float:right;} */
#box {float:left;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
</body>
</html>
Uncomment the first float left id with the float right one and you will see. I left my tried solutions commented out as well.
You should have a full repro from a copy and paste.
I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.
I'd love for someone to prove me wrong though.
Here's a javascript solution that works:
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
#box {position:absolute;top:0;left:0;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
<script type="text/javascript">
function layout() {
if( typeof( window.innerWidth ) == 'number' )
this.screenWidth = window.innerWidth;
else //patch for IE
this.screenWidth = document.body.clientWidth;
this.el = document.getElementById('box')
if (this.el.offsetWidth > this.screenWidth)
window.scroll(this.el.offsetWidth,0);
else
this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
}
function eventListener(el,action,func) {
if (el) {
if (el.addEventListener)
el.addEventListener(action, func, false);
else if (el.attachEvent)
el.attachEvent('on' + action, func);
}
}
eventListener(window,'resize',layout);
layout();
</script>
</body>
</html>
I had (what I think may be) a similar issue where I wanted to right-align a canvas element that is wider then the div that holds it. The div is about 300px, the canvas element about 1000px.
Using float: right, the canvas was right aligned but the scrollbars on the div disappeared.
I solved this with jQuery using scrollLeft() to set the initial scroll based on the div and canvas widths, similar to:
$("#div").scrollLeft(canvas.width() - div.width() )
I had this problem. I solved it by making the inner contents display:inline-block, then the outer container text-align:right. The inner content gets 'floated' right (as if it was inline text) but the scrollbar still remains. You have to reset the text-align on the inner content or all its content gets aligned right too.
If your inner content doesn't like being inline-block, then you're stuck with other solutions.