I have angular app that is using Bootstrap 3 and Angular UI for layout control.
I want to have a particular element fit to the full width of the browser. This element lives inside a bootstrap grid (col-xx), which is itself inside an angular directive, which is placed inside another bootstrap grid, which is inside a Angular UI tab, which is inside another grid. I think you get the idea.
What is the correct CSS to get my element to be the full browser width ? The width of the parent of the element is only a fraction of the screen width, but I need this particular div to override everything because I need maximum real estate (trying to show a gantt chart).
The effect I am trying for is similar to the current google image search feature when you click on a particular image and the bar expand across the full screen.
Apologies if the question is a bit unclear. I may need to add some code.
You'll have to use position: fixed to take it out of the document flow, otherwise using width:100% will always refer to it taking up 100% of the width of it's parent container.
Add the class fullWidth and style like this:
.fullWidth {
position: fixed;
left: 0;
right: 0;
}
Here's a Demo in jsFiddle
Related
I'd like to increase the width of the border below my top social buttons, navigation menu and footer social widgets to fit the width of the screen but can't seem to figure out how to.
My page - www.adelinesays.blogspot.com
You have #top-social nested as a child of .outerwrapper.
If you remove the property width: 1100px; from .outerwrapper it will extend the #top-social component the full width.
Basically .outerwrapper is making #top-social have a maximum block width of 1100px.
If you open up Chrome developer tools (command + option + "i") on Mac, you will be able to select the .outerwrapper and uncheck width: 1100px; and you will see the desired output that you are looking for.
I think this is the simplest solution and I see it working as desired just with this one change.
If you find problems elsewhere by removing this max-width, you can create another container on the same top level as .outerwrapper and just put your top navigation items inside of it. The fact that you are nesting a "full-width" top navigation inside of a constrained width parent component (a component higher up in the vertical rythm to the nested #top-social component) means that the #top-social component is inheriting this max-width from its parent .outerwrapper.
Hope this helps!
#javascriptjames
http://jamescoury.com
The way your website is built, you could delete outerwrapper altogether and apply container class to those elements that you wish to maintain width of 1100px.
Deleting outerwrapper div, container div surrounding navigation and adding container class to widget-content div would achieve the layout you wish in this case.
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
Im in the process of making a multi-level multi-column dropdown using bootstraps popover
The problem I am running into is that I am using multiple popover-title's as the heading of each category but the height will be wrong if there are too many links in the popover-content content above it.
Whenever i inspect i can see the height of popover-content isnt set to anything is there anyway to have this set to reflect the actual height of the div?
Here is a Codepen of what i have so far Ive only started on the "A little bit of everything" sub menu
I've tried doing
.nav.departments .popover-content{
height: 55px;
}
And this works but it is not dynamic i have to set a fixed height for every section
Instead of giving a fixed height to the div for proper displaying of the content use display table instead.
.nav.departments .popover-content
{
display: table;
}
-Thanks
I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their
An example is worth more than 1,000 words:
I have created a stripped down JsFiddle that shows the problem:
http://jsfiddle.net/drysg/Rh7cL/
Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
Expands Grid, Chart, and Map to fill the screen at outset
Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
The map height is not 100% of the needed space
The TabStrip that holds the Chart & Grid is not filling 100% of the height
There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart
Set both BODY and HTML elements to { height:100%; overflow: hidden} and then reinstate your commented DIV height rule back to 100%;
See http://jsfiddle.net/t4dzj/1/ - does that take care of it?