When making an adaptive web page the child block "falls out" of the parent block. The entire page is shifted some distance to the left, and an empty bar appears on the right, which moves all the content.
I need to put all content in the correct place.
I've tried setting the block width to 100%, but it still gets larger than the parent block.
When making a web page, I used bootstrap v5.1.3, maybe the problem is in some properties in it that override the set width of my block?
I got this error when using the bootstrap 4. I wanted to make offset sections on the page, for this I used the “row” and “col” classes, but they got out of the parent block.
enter image description here
If you look at the picture, you can see that bootstrap does have built-in class indentation (strikethrough now).
To redefine them in the section itself, change the margin to the one you need.
<section class="row **m-0**">
<div class="col-3 brown-background **p-0**"></div>
<ul class="col white-background list-without-point p-0 m-0">
<li class="row align-items-center **m-5**">
//smth here
</li>
<li class="row **m-5** align-items-center">
// smth here
</li>
<li class="row **m-5** align-items-center">
// smth here
</li>
</ul>
</section>
If I understood the problem correctly, this might be the solution.
Related
I am trying to create a page with a search bar and filters underneath. I really like the way the search-toolbar looks, but it's creating space that I don't need. Is there a way to modify i to get rid of the space?
Thanks!
Here's an image of what I have:
Search bar with toolbar underneath
Edit: That grey space is what I'm trying to get rid of.
Here's my asp code:
<div class="search-toolbar" style="background-color:white">
<ul class="list-unstyled nav nav-pills">
<li>
Everything
</li>
<li>
Other Content
</li>
</ul>
</div>
<div class="tab-content">
Content
</div>
Figured it out, I found the css file and edited it.
I'm still new to web development, and I wasn't aware that I could do that.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I am using bootstrap to build my site and the main navigation uses dropdowns for second level choices.
In IE10 only (works everywhere else), the dropdown menu is inconsistently accessible and if you are able to access the second level choices, they disappear after hovering off of them. In other words as you hover down the list of menu items, the one above will disappear when you hover onto the menu item below it. Perhaps there are two problems: one being you can't access the dropdown (maybe a padding issue?) but the disappearing problem, I have never seen before.
Here's my fiddle with the problem
(**When viewing the fiddle make sure to adjust the width of the Result panel otherwise it will be collapsed for mobile)
My html is pretty simple:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'>Getting Around
<ul>
<li>Find Your Ride</li>
<li>Transit Overview</li>
<li>Carpool/Vanpool</li>
<li>Biking & Walking</li>
</ul>
</li>
<li>Travel Training
<ul>
<li>Do It Yourself</li>
<li>Transit Orientation</li>
<li>Transit Ambassadors</li>
<li>Schedule a Training</li>
</ul>
</li>
<li>Senior Safe Driving</li>
<li>Programs & Services
<ul>
<li>Mobility Programs & Services Locator</li>
<li>Mobility Programs Overview</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Thank you in advance! I am stumped.
A variety of issues at work here, but I seem to have solved it. IE10 doesn't play well with display:none and once I replaced with visability: hidden on my navbar>li>ul, things seemed much better.
Also, can't confirm but since bootstrap adds a background color of transparent to its a tags, I think the background color of the list items we're going transparent. Adding a background color, adjusting the line-height seem to fix.
link to fiddle in original now works correctly in IE10.
I'm an experienced software engineer just getting into web dev and I'm having some issues getting bootstrap 3 row-fluid to work correctly. Basically, I'm trying to get a side navigation bar and an angular application to work together in a fluid layout, but when I attempt to use row-fluid, it is stacking the two elements instead of putting them side by side. Here is the code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li class="nav-header">Administer</li>
<li class="active">Users</li>
<li>Devices</li>
</ul>
</div>
<div class="span9">
<div ng-view></div>
</div>
</div>
</div>
Also interesting is if I change row-fluid to row, the same behavior persists. Changing spanX to col-lg-X fixes it, but I lose the fluid layout. any ideas?
Use .col-md-* instead of .span*
Bootstrap 3 is responsive by default, so there is no need for the -fluid. you can just use row and container.
And the span classes you are using are from bootstrap 2.x not 3. you need to use something like col-lg-4 or col-xs-4. check out the bootstrap 3 docs for more info on this.
See here for more info on the Bootstrap 3 grid system
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.