Context, my page is divided like so:
Left hand side (col-xs-8)
Right hand side (col-xs-4)
The right hand side should remain fixed and not scroll (there are some elements on the left hand side that need scrolling). The right hand side has the following code:
<div class="col-xs-4">
<div class="row">
<div class="col-xs-10 col-xs-offset-1>
<div class="table-responsive">
<table>
The problem is that the row doesn't seem to expand the full width of the col-xs-4, and I'm not sure why. If I try to add a width:100% style on the row, it seems to go crazy and expand to a normal browser window even though it's nested within a col-xs-4. And the reason this is a problem by the way is that the table needs to be wider than it is because now it's completely illegible.
I've been doing some troubleshooting but am stuck. It looks like the problem is that the col-xs-4 is not even "registering" on the page. If you do an inspect element, the col-xs-8 of the left hand side is visible, but the col-xs-4 is not, which indicates that the col-xs-8 isn't closed, but I've looked everywhere and it is....
Anyways, would love help, here's the working staging environment link since this is a little hard to explain: https://hidden-tundra-8656.herokuapp.com/request
Related
I've got a view with Angular (v.5) components, that uses Bootstrap for making the layout in the screen. So I've got various controls, one at the left, which uses most of the space (col-md-8), and two controls which are inline, in the right part (col-md-4).
Even trying col-sm I notice that in little displays (less than 1280px), the two components in the right, get overlapped one over the other. Check:
This is how it looks in big screens, the intended behavior
But one of them "mounts" over the other like this, when you make the window a little smaller
It even reaches this point...
But when you make the window really really small, it looks like this, which is fine in my opinion.
I want to do that one of these components, actually just puts in top or bottom side of the other, or simple get advantage of all the free space, instead of getting overlapped by the other like it currently does.
This is the current code of this header of my template, give it a look:
<div class="row">
<div class="col-md-8">
<segments [config]="config"></segments>
</div>
<div class="col-md-4 date-positioning">
<div class="row">
<div class="col-md-4 col-sm-4">
<granularity [config]="config" ></granularity>
</div>
<div class="col-md-8 col-sm-8">
<date-picker-wrapper [config]="config" [dateranges]="dateranges" [doubleDateRange]="true" ></date-picker-wrapper>
</div>
</div>
</div>
</div>
What you see are the granularity and daterangepicker components, the segments one is the component you see in the final image, which occupies most of the left side of the screen (but there's a reason for that)
So, any ideas on how to style this properly with Bootstrap, so this weird behavior doesn't happen?
I have been working on making a site responsive for a client. The client wants the left menu to drop to the bottom when the site collapses down. All pages work this way and here is an example:
Page working correctly
However, there is one page that is 3 columns (all others are two columns) that isn't working properly and here is the example:
Not working correctly
Right now the structure of the page not working correctly is:
<div class="content-column-left" id="bio-nav"></div>
<div class="content-column-center"></div>
<div class="content-column-right"></div>
I have noted that if I rearrange the columns in Developer tools so they sit like this:
<div class="content-column-center"></div>
<div class="content-column-right"></div>
<div class="content-column-left" id="bio-nav"></div>
I can then add a float:left and a width=21% to the #bio-nav and then a float:right to the other two divs and I get what I want on collapse, but it looks terrible at full screen.
How do I make this work so that that column with the navigation collapses to the bottom like the other pages? I am willing to restructure things as needed. Thanks!
EDIT: I made a small change to the structure and adjusted so the widths are percentages. At this point the right column refuses to collapse under the center column at all: Updated way site is collapsing
On that page the markup needs to be as follows:
<div class="content-column-right content-body content-right-team-member"></div>
<div class="content-column-center content-body content-body-team-member"></div>
<div class="content-column-left" id="bio-nav></div>
Then
.content-column-right
needs to be
float:right
Then
.content-column-center
needs to be
float:right
Then (I think this one is okay as is)
.content-column-left
needs to be:
float: left
Anything after that your just going to have to mess with it
I search the whole questions but I cannot find the solution, so here is my problem.
I have a forum webpage using forumengine theme by wordpress. In the main page and the category page everything is in order, sidebar appears where it has to be but when I click and enter the tread, the sidebar on the left moves to the bottom of the page. I cannot find the solution.
Can you tell me where is the problem?
You can see the problem I've mentioned at http://forum.banaisbul.com/Baslik/herkese-merhaba/
Your html structure is messed up, particularly for using bootstrap.
Solution 1(Ideal)
The div containing the following class col-md-3 marginTop18 thread-discuss-right hidden-sm hidden-xs needs to be put under the <div class="row"> that you have given so that grid will work.
Solution 2
The col-md-9 margin that you have given should be removed and add to the immediate parent div.
Add to the row element in your "container main center" the class "col-md-9".
<div class="row col-md-9">
I have an issue I can seem to get a grip of.
On my website I have 2 'Cols' (col-md-9 and col-md-3) this then on the web puts them side by side (which is fine).
The right hand side (col-md-3) contains 3 panels in it which run underneath each other.
On a tablet size device, I have made it (col-sm-12 and col-sm-12) which puts the right hand column at the bottom which I want.
and I have added col-sm-4 to each panel so instead of running underneath each other they run side by side on the tablet.
BUT what I want to know is, is there a way of only using the col-sm-4 when tablet size otherwise don't apply a 'col'?
I've tried using adding the col-md-12 to the panels but this shrinks them and makes them look odd.
This is a hard thing to explain.
Bottomline is, if small, apply the 'col' otherwise don't.
To resolve it I removed the col from my controlling DIV and added the sizes to each panel
http://bootply.com/101886
why the second row left a gab there? I want to ask is this the right way or the right markup of a template? I found sometime my div isn't aligned properly. Do you guys think use container again to wrap all the <div class="container"><div class="row"><div class="col-md-12"> is a good practice? because when you resize into mobile, there isn't padding.
Is this what you want to do?
http://bootply.com/101968
I think paddings for the background is not necessary but for texts it is better to have proper paddings in mobile view, which is Bootstrap3's default settings.