i'm having this problem........
<div id="Div_DefaultPage">
<div id="Div_inner1">
</div>
<div id="Div_inner2">
</div>
</div>
what i want to do is, i have a combobox which have 2 choice - inner1, inner2.
if user select inner2, inner1 will hidden and inner2 will display on the top of Div_DefaulPage.
The easiest way to do this is to use Javascript to show and hide divs. Here is a tutorial of how you'd accomplish that.
Try your hardest to follow the examples. If you have a problem trying it then post your code and we'll try to help you out. Good luck!
Related
Page has two div elements in columns and my requirement is to resize the left column by selecting one side (right edge).
Below is my HTML code
<div id="leftSide" class="left-panel" >
<div class="left-top-panel">
</div>
</div>
<div id="rightSide" class="right-panel" >
</div>
I know there is css resize property. This is not helping me because using this element can be resized by selecting a corner.
I want to achieve this in my angular2 components. Any help on this is much appreciated.
This sounds like something that would be solved by a library or similar, not by Angular. Angular provides a framework that might allow you to hook into that sort of logic, but I would recommend using CSS/Component libraries to provide you with that functionality.
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
Basically what i want to do is this:
http://jsfiddle.net/wQBq5/20/
without using tables.
Here is an attempt:
http://jsfiddle.net/vaDCQ/
This fiddle shows the basics: http://jsfiddle.net/cA3su/. But there are differences. For one thing, the "inner" divs don't stretch all the way to the right like the table does. For another, you need to understand how floats and clears work. It takes some practice and experimentation. In short, divs will never work exactly the way tables do. But once you know how to do it, divs get you free of a lot of the headaches that tables create.
You can achieve this using float.
You can use something like this (basic example):
html:
<div class="left-container">1</div>
<div class="right-container">
<div class="number2">2</div>
<div class="number3">3</div>
</div>
css:
.left-container{float:left;width:100px;}
.right-container{float:left;width:100px;}
.right-container .number2{float:left;width:100%;}
.right-container .number3{float:left;width:100%;}
Here is my example.. http://jsfiddle.net/wQBq5/37/
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.