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.
Related
I'm having trouble making my react app fill the whole screen while being able to size its children properly. Why is it that this works:
<div className="h-screen bg-blue-500">
<div className="h-1/2 bg-red-500"></div>
</div>
and this doesnt:
<div className="min-h-screen bg-blue-500">
<div className="h-1/2 bg-red-500"></div>
</div>
I've looked through the docs and other posts but nothing really touches on this specific problem. Also although h-screen makes it so that the children behave as expected, it doesn't fill the whole screen when there's a need to scroll. I'd appreciate any input, thank you.
This is simply how CSS works. The Tailwind class min-h-screen equates to min-height: 100vh; and the class h-1/2 equates to height: 50%. You cannot use a percentage as a height inside a container that doesn't have an explicit height (i.e., if its height is auto such that it is dependent upon the content inside of it).
The formal definition in the CSS specification says
[t]he percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
One way to work around this is to add the grid class to the parent element. CSS grid containers have intrinsic height and width, so it is possible for your height: 50% child to use the intrinsic height of the grid to calculate its relative height.
This is fine if your container only has a single div such as in your example. However, the empty div will collapse as you add more content in one or more additional children containers.
If that's not the behavior you want, and you always want the one container to be 50% of the parent even if it overflows the min-height, then you can use grid-template-rows: 1fr 1fr (or in the case of Tailwind grid-rows-2 which translates to repeat(2, minmax(0, 1fr))) instead of height on the child:
<div className="min-h-screen bg-blue-500 grid grid-rows-2">
<div className="bg-red-500"></div>
<div>
<p>Add as much or as little content here as you like.</p>
<p>Both child divs will always have the same height of 50% relative to the parent</p>
</div>
</div>
I have a chart that's in a div that's set to overflow-y: scroll. The tooltips spill out of the chart to the right and part of them can't be seen.
Apparently, CSS doesn't allow overflow-y: scroll and overflow-x: visible at the same time, hence the obscuration of the tooltips. I also had the same problem with a calendar but it has a setting that changes the direction that it expands.
Is there a way that I can reposition or offset the tooltips such that they expand to the left?
Here's a pic...
I thought this hack would work but it results in the div containing the charts becoming horizontally scrollable.
https://stackoverflow.com/a/39554003/221683
The tooltip shoud be outside the oveflow box if you want to show wider area of it. You can calculate its position in js on mouseover or any other action - without the code I do not know what are you showing, how, and why it is not working as you describe. "the code works fine" - apparently not, if you asked your question...
<style>
.container { position:relative; }
.tooltip { position:absolute; }
</style>
<div class='container'>
<div class='tooltip'>Hi mum, this is long as hell tooltip, not overflowed</div>
<div class='chart'>
... chart data
</div>
</div>
I am including a template inside a modal which is being used elsewhere as well ::
<div id="addressModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div ng-include="'templates/add-address.html'"></div>
</div>
</div>
</div>
i dont want to modify the grid system inside this template only for this modal window , as it is being used in other places as well . So my question is that there are coloumns in this template with :
<div class="col-md-4 col-sm-6>'my content'</div>
since my modal window is small, u can consider it in 'sm' range, but nevertheless it positions its layout according to 'md' only . Is there any tweak to have the modals accept grid sizes according to the modal window size ?
Here is not about how small is your modal window, but about screen width.
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
You can see in the bottom of this page the width in pixels for each .col class.
So, you must think it as screen resolution, when you use the .col classes to be activated. This, or you can create your own classes with width estimated in % and use media to proper display them.
The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382
I'm designing a wordpress theme for general use, all text links have a border-bottom applied on the hover state. When an image is placed into the post, it inherits this state, which I obviously do not want.
This only occurs when an unaligned image is placed in the post. Aligned right, left & centered images are placed in a div, unaligned images are placed in the p tag by default.
I can't access this unaligned image through CSS, here's the HTML hierarchy when an image is posted....
<div class="the-post">
<p>
<a href="image.jpg">
<img class="gen-class-name" src="location">
</a>
</p>
</div>
I've tired accessing it through CSS by a lot of different structures, i.e.
a:hover img
p a img:hover
p img:hover
.the-post p a img.class-name:hover
and set the border to 0. I'm ready to pull my hair out or just remove the border bottom from all links at this stage :(
I figured it out, adding vertical-align:middle fixed it