I have the following
<div id="border" style="width:100%; border:8px solid #FFF">
<div id="menu" style="width:250px; float:left;" >
Some menu
</div>
<div id="content" style="padding-left:270px; width:520px;" >
Main page content
</div>
</div>
This gives me a left aligned menu and the content to the right of it, all surrounded by a border.
On all browsers including IE8 it displays correctly.
But on IE7 the content only starts below the menu, and leaves a big open space to the right of the menu.
I have searched all kind of solutions and tried all kinds of combinations of right, left, none for float. clearing left right both. It always displays different on the browsers.
Any help is appreciated.
Michael
Remove the padding on your content div and set it to float left.
You might have to put <div style="clear: left"></div> after it
Related
This works on Chrome, FF and Safari. In Edge when I left click in the input field, it seems that on the mouseup event the input loses focus and the cursor leaves the input to some random element above. I can tab into this input and I can right click to bring up the copy/paste menu, click elsewhere on the page, and the cursor stays in the input.
<div class="card" ng-repeat="prod in product" ng-if='ngCart.itemInCart(prod.id)'>
<div id="{{prod.id}}" count="{{prod.count}}" class="card-info col-md-12" ng-click="showInfo(prod.id)">
<div ng-if="prod.count == 0" class="info-form pink-active col-md-12">
<div ng-if="prod.id == '11'" class="col-md-12">
<input type="text"/>
</div>
</div>
</div>
</div>
Any idea how I can troubleshoot this? Again, it works perfectly in other browsers. Client is using Edge, so I have to fix this.
UPDATE: If I left click in the input and move the mouse outside the input before I release the left button, the cursor stays in the input, again the mouseup event is what's breaking this. Thanks!
I'm working on a responsive template for a Joomla site. (http://www.lyzarr.com/testsite/de/)
Which can a have a left and right sidebar as well as the main container.
Right now the content goes right up to both sides, but I like to have a margin of about 30px both left and right.
Since the template is responsive, I don't know how to do it.
You can try to add padding in css file to container-content class,
.container-content {
padding: 0 30px;
}
and in
/templates/your_template/index.php
change row class to row-fluid
so your structure will looks like here
<div class="container-content">
<div class="row-fluid">
<div id="content" class="span9"></div>
<div id="sidebarright" class="span3"></div>
</div>
</div>
in bootstrap 2.3.2 if you use row class, your span* (columns) will have fixed width [span9 = 870px and span3 = 270px]. so if you add left / right padding there will not be enough space for content and column. But if you use row-fluid class, your span* width will be set up in percent value.
I'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.
I have a list of horizontal divs that I cannot make them act as I want them to.
What I want to achieve is have
for md, lg, sm - a list a rectangular divs that contain a small "thumbnail" class image of any sized image and continue with the user's name horizontaly - as can be seen in the example in md view.
for xs I want to have each entry below the other, name below the image - which should be screen size.
I could not exemplify with the image as I already used too much inline css.
http://www.bootply.com/T0AAHhHU0h
Unless I misunderstood your question, it looks like you're pretty close to what you're looking for... just change your col-md-3 to col-sm-3 and the switch to vertical layout will happen at xs breakpoint instead of sm breakpoint, as here: http://www.bootply.com/Ba1aGC1Lds.
<div class="col-sm-3" style="margin-bottom:20px">
<div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
<div class="col-md-4" style="background-color:black;height:60px">
</div>
<div class="col-md-8">
<strong>John Smith</strong>
</div>
</div>