What I need is very simple, or atleast it should be, but after days of research I've come to resort to asking on stackoverflow if anyone actually has any idea how to do this...
I have 3 columns of content, all of which have expandable content inside. None of the content is very wide, but it is plentiful (once expanded). I need to do it so that when you expand the content in one column, it shrinks the other two columns up to a certain amount, and when you expand the content of two columns it evens out etc. Then, the columns must have a percentage max-size and a min-size (percentage or static), so that when columns expand they don't completely squash the others, and so that I can set a maximum "expandability" to each column. For simplicity's sake, here's an example that would've done the trick if only it worked:
<table width="100%"><tr>
<td style="min-width:200px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:200px; max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:200px; max-width:40%;">Col3ExpandableContent</td>
</tr></table>
The above code doesn't work of course, but I'm sure you can imagine how it would work if it did. It's exactly what I need, only that max-width doesn't work with percentages on TDs for some reason. If you need a better visualization I made a fiddle to help illustrate the problem here: http://jsfiddle.net/m5xgcf3s/
I can't just use the min-width's of the cols because of the nature of the contents, they all need to be expandable but only a certain amount. I'm open for any solution and any way of doing this, it doesn't need to be a table (it's just that the TD widths and alignments in a table is perfect by default, if only it supported max-width percentage) or anything as long as it meets the requirements and doesn't use a framework (which hopefully shouldn't be needed anyway). Bonus if it doesn't use javascript at all, but BIG BONUS if you find a solution that allows for a smooth animated size transition while still meeting the requirements. Also bonus if you can explain to me why the heck max-width percentage doesn't work on table cells...
Thanks for the help guys, but I made a script that solved it myself... NO frameworks, NO jQuery, NO hacks, just give the TDs an id and put in this code;
<script type="text/javascript">
window.onresize=function setTDmaxwidth() {
var containerwidth = window.innerWidth;
if (containerwidth >= 400 ) {
document.getElementById("col1").style.maxWidth=( ( containerwidth * 0.6 )+'px');
document.getElementById("col2").style.maxWidth=( ( containerwidth * 0.5 )+'px');
document.getElementById("col3").style.maxWidth=( ( containerwidth * 0.4 )+'px');
} else { }
}
</script>
It simulates a percentage max-width by calculating a fraction of the container width every time its size changes (in this case the container is 100% the width of an iframe). I'll leave the question unanswered though incase anyone comes up with another answer (with or without a table), hopefully one which allows for width transition animations, or a valid explanation as to why percentage max-width's don't work on TDs
Can you try it?
I have kept example for only one tr td.
You have to do each function for this case.
try it, you will have some idea..
Css
<style type="text/css">
td { border: 1px solid black; }
</style>
Script
<script>
function onLoadFunction(){
if(($(".tdFirst div").text().length)<100){
$(".tdFirst div").css('width','200px'); // min width
} else if(($(".tdFirst div").text().length)>=400) {
$(".tdFirst div").css('width','400px'); //max width
} else {
$(".tdFirst div").css('width',$(".tdFirst div").text().length+'px'); //width auto adjust
}
}
</script>
HTML
<body onLoad="onLoadFunction()">
<table>
<tr>
<td align="center"class="tdFirst">
<div>
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
<td><p>testing...</p></td>
</tr>
</table>
</body>
Attempt #2
script Use jQuery in your fiddle
$('document').ready(function(){
$(".tdFirst div").each(function(){
if(($.trim($(this).text()).length)<50){
$(this).css('width','20px'); // min width
} else if(($.trim($(this).text()).length)>=60) {
$(this).css('width','60px'); //max width
} else {
$(this).css('width',$.trim($(this).text()).length+'px'); //width auto adjust
}
});
});
To set widths to be dynamic using percentages and max-width, the parent should have a fixed width in px terms , so in this case it has to be either on the table element or a container div of table element.
I have updated the fiddle here: http://jsfiddle.net/qoaxxbqp/
this update has both initial widths set on container div as well as table element as in :
<div style="width:600px;border:2px blue solid;" >
<table width="500px"><tr>
<td style="min-width:100px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:100px;max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:100px; max-width:40%;">Col3ExpandableContent</td>
</table>
</div>
you also only have table set to a fixed width initially and not have a parent container, or set fixed width on container div and use width:100% on the table. Either way, but have a parent / immediate parent's parent with a fixed width(table with % width in this case).
I have also added a jquery hover in/out functions to demonstrate the expansion.
Related
For example,
I have an AbstractStorageTest which has several tests including storageOverflow.
Children of that test class are ArrayStorageTest, ListStorageTest, MapStorageTest, SortedStorageTest.
Obviously storageOverflow is not applicable for Lists and Maps as they increase automatically when required.
How do I exclude storageOverflow test in ListStorageTest, MapStorageTest, and SortedStorageTest and leave it only in ArrayStorageTest where it is applicable to?
I overrode that test method in ListStorageTest, MapStorageTest, and SortedStorageTest making them pass successfully, but it does not seem to be the right solution.
How about creating another abstract test class like AbstractLimitedStorageTests that extends AbstractStorageTests and serves as a new home for your storageOverflow test method. ArrayStorageTest than becomes a subclass of this new class.
I currently am writing a unit test where I am trying to use wrapper.find to find a child HTML element
I tried using wrapper.find(element).find(element).exists()).toBe(true); however the result always returns false. When I tried to find each element separately, the test returned true.
What I am testing:
if(brand === Nike) {
<div className="test">
<p>Hello world</p>
</div>
} else {
<div className="test"></div>
}
The current test I have (testing that the brand is Nike):
expect(wrapper.find('.test').find('p').exists()).toBe(true);
I have defined the wrapper previously (like stated, separately the test works, it's when I try a nested find that it doesn't)
I expect the output to return true since the brand is equal to Nike.. however it returns false always.
It would seem to me that a simpler solution is:
expect(wrapper.find('.test p')).not.toBeUndefined();
The nested finds aren't necessary.
Also, the brand check, is Nike an element? If it's a string you should be checking for it as a string:
if (brand === 'Nike') { ...
If a textarea is disabled and has overflow-y it no longer lets you resize.
If you add overflow-y to hidden and keep it disabled it does let you resize.
Any way to have a disabled textarea with scrollable overflow-y and still have it resizable?
Fiddle with just textarea:
https://jsfiddle.net/bs5sakus/ (not resizable)
<textarea disabled> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </textarea>
Fiddle with overflow-y hidden: https://jsfiddle.net/30o3tmap/ (resizable)
Possible solution is to use readonly instead of disabled and style it to look disabled. This also allows users to highlight and copy the text in the textarea but not modify it
https://jsfiddle.net/xynLfqag/1/
<textarea readonly> TEST </textarea>
jQuery UI resizable will work but using the SE grabber and scrollbars cause overlapping
https://jqueryui.com/resizable/
Hello I ran into the same situation here.
As I read in some comments above, the issue may be with your own app as the default behaviour does allow the scroll and resize simultaneously
In my case, I found somewhere forgotten in my app the following css set up:
*::-webkit-scrollbar {
display: none;
}
This was avoiding the correct default behavour from textarea
I removed it and the textarea worked as expected
Hope it helps
My Selenium Test Case and Test Suite is not working properly, for some reason when I play each test case separately, it works, however, when I play the whole thing together, it says: 'Element ... not found' and also, if I add both test cases to a new test case and play this new test case, it doesn't work. I am assuming my first test case is fine as that always works, but it gets the element not found error at this point, and I have tried other ways as well:
<tr>
<td>click</td>
<td>//div[#class='btn_sel_text' and contains(., 'Volume Entry')]</td>
<td></td>
</tr>
I also tried replacing the '//div' with:
css=.btn_sel_text:contains('Volume Entry')
however that didn't work either. Can anyone please explain why it doesn't work when I run the whole thing together, however, if I simply run the //div or the 'css' on it's own it does work.
put a pause before click.
command:pause
Target:3000
Try it,Thank you.
Find Xpath of that element using firepath. with Xpath of element you can click on it. do this & let me know your problem is solved or not
<tr>
<td>pause</td>
<td></td>
<td>1500</td>
</tr>
<tr>
<td>click</td>
<td>Xpath of the element </td>
<td></td>
</tr>
In trying to debug this problem for myself, I found that if I had two test cases that worked individually and then when I ran them together in a test suite a link/button could not be found in the second test case, the solution was actually to modify the FIRST test case.
If you have more than two test cases, try changing the order around so that there is some other test case immediately following the original first test case. When I tried that, my error moved from the original second test case to the new second test case.
I don't know exactly why, but it is like Selenium is unable to catch up with the effects of the first test on the browser or something. If add, however, a 'pause 5000' followed by a ClickAndWait (to an inocuous link that keeps me on the same page, perhaps) to the end of the
first test case, then when the first and second test case are run together in the test suite, the second test case now works.
I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?