I have the following html code.
<div class="panel" style="background-color: #e6e6e6">
<div class="col-sm-9">
<video id="currentVideo" src="{{currentVideo.Source}}" width="100%" height="auto" controls style="margin: 5px">
Your browser does not support the video tag.
</video>
</div>
<div class="col-sm-3" style="overflow-y: scroll;">
<div ng-repeat="video in videoHelpFiles" style="margin: 5px">
<button class="btn btn-primary" ng-click="showVideo(video)" style="width: 100%; white-space: normal; padding: 5%">
<h4 style="text-align:center; margin: 4px 0px;"> {{video.Title}} </h4>
</button>
</div>
</div>
</div>
There's some styling in here too which I want to eventually move but leaving here until I get it how I want it. Basically all I want to do is have the col-sm-3 div be the same height as the sol-sm-9 height and would like the buttons in the col-sm-3 div to use 100% height of the div they're in. I've tried using height='100%' and a few things like that with no luck. Any help would be greatly appreciated.
Related
I have two Div's, the left one is a sidebar of sorts (but it does not extend the full height of the screen), and the right one is the content Div that should occupy as much of the screen as possible and collapse/move underneath the sidebar as the screen shrinks. Right now I have the sidebar set up how I expect it to be, but the Content Div begins to overlap the Sidebar as the page shrinks and does not move below.
I have tried different position: parameters (fixed,absolute,relative) different width/min-width values, as well as different values for float. I have everything in html styling right now for simplicity. The css files that were being used seemed to be interfering with functionality so I attempted to override them via styling directly within the HTML.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>
Content div should shrink, and at a certain point, move below the Sidebar div.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
<div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</div>
<body>
I got your code working using Display:flex, it's a good idea to also separate your code into html and css and use classes references in the HTML. There is a lot of benefits to this including easier to maintain, cleaner, and also makes it easy to follow etc.
Img Align centre or center not working on HTML website kodeum.co.uk. The error is on line 232
<div class="container mt">
<div class="row clients centered">
<p class="mb">Some clients that I had the pleasure to working for.</p>
<div class="col-sm-2">
<img align="centre" src="assets/img/coding-kids.png" alt="Coding Kids">
</div>
<div class="col-sm-2">
<img src="assets/img/flydan.png" alt="flyDan">
</div>
</div><!--/row-->
</div><!--/container-->
</div><!--/.G-->
Can Anyone Help?
Harry
Think you just misspelled center
But you may have better results doing it within the style of the div anyways
Try this, Assuming the width of your png is 200px
<div class="col-sm-2" style="width: 200px; margin-left: auto; margin-right: auto;">
<img src="assets/img/coding-kids.png" alt="Coding Kids">
</div>
I have the following page and I want the textarea width to take up the rest of the width of the page but the width style isn't changing the size at all and I'm not sure why. If I change the txtChatMsg textarea width style to anything nothing changes visually.
<div class="container-fluid">
<div class="row" style="margin-top: 10px; background-color: aqua;">
<div id="divPortrait" class="col-md-3 text-center">
<img src="~/Content/good_guy.png" />
</div>
<div id="divChat" class="col-md-9" style="background-color: gray;">
<div class="row">
<div id="divMessages">
<!--DYNAMICALLY ADD DIVS FOR EACH CHAT MSG INSIDE HERE-->
<div>
Test Message here
</div>
</div>
</div>
<div class="row" style="background-color: red;">
<textarea id="txtChatMsg" class="form-control" style="width: 100%;" rows="2" placeholder="Write a reply..."></textarea>
</div>
<div class="row text-right" style="margin-top: 5px;">
<button type="button" class="btn btn-default">Send</button>
</div>
</div>
</div>
As dm4web stated, there's something external to the code that you you posted that is causing this behavior. To prove it, here's a JSFiddle where the style on the txtChatMsg element has been changed to width: 50%.
You could try inspecting the txtChatMsg element in your browser to see if there's any styles overriding the CSS width rule. I'd also check to see if there's any Javascript that is potentially targeting this div and overriding the width.
Let's say i have,
<div style="padding: 15px; width: 100%;">
<div style="margin: -15px;; width: 100%;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
The parent div contains 15px padding and - child div wanted to remove this padding by using margin but it does not work. See this fiddle. It's showing me a horizontal scrollbar always.
http://jsfiddle.net/2GJnG/
Remove the width properties of the two div elements:
<div style="padding: 15px;">
<div style="margin: -15px;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
See a demo here > http://jsfiddle.net/2GJnG/5/
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.