I am trying to add a chat to test site. Using float right is perfect, because if the screen goes smaller then it moves with it, but the problem with that it's not "not enough right" for me. Is there any other responsive ways to get the chat more right? I am using bootstrap
Here is the chat HTML code:
<div class="chat pull-right" style="width: 30%">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Chat</h3></div>
<div class="chat-messages panel-body">
<div class="chat-user">
<div class="chat-username">James</div>
<div class="chat-message">This is a test</div>
</div>
<div class="chat-user">
<div class="chat-username">David</div>
<div class="chat-message">This is a test</div>
</div>
</div>
</div>
</div>
I don't know where you want have your chat box, example if if want to have chat options always on right corner or always on half height of display, you can use position absolute and z-index for that. PS what mean: "not enough right"? Can you add some screen shot or maybe example on bootply or fiddle.
Related
Bootstrap Grids
I'm having an problem with the Bootstrap grid system can't seam to position my content the right way that I want to. Here is what I have so far.
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
<div class="col-md-2"><h3>My Website</h3></div>
</div>
</div>
</header>
Goal
What I want to achieve is to have a full width web page for large desktops and responsive for mobiles where the logo image and the "My website" slogan will be on the left and the content will be positioned in the center.
Here are some images of what i want to achieve on desktop and mobile http://s16.postimg.org/tbt4b5det/Untitled_1.png - Desktop
http://s10.postimg.org/mbijfjvkp/Untitled_2.png - Mobile
check below what have:
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="/logo.png" alt="" class="img-responsive"/>
</div>
<div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
<div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
<div class="col-md-6 col-md-offset-3">
<div class="disclaimer">
<p>Some text here</p>
</div>
<div class="link">
<span>Follow Us</span>
</div>
</div>
</div>
</div>
</section>
Other Issues
It seams every time i test for different devices or simple resize the browzer the image goes extra small until it get to sm devices and than again continues to get smaller.
Thank You
I thank you for your help i'm new in web development any suggestion is appreciated.
The way I'd do it is by changing the container class to <div class="container-fluid" style="text-align:left;"> allowing for full width usage of a screen.
Then, just put a <div style="text-align: center;"> around what you want to center.
Though this will make all elements stretch the entire screen width, including the col-*-* classes. Just add col-*-offset-* as required to adjust for this.
Your img is getting smaller because of the img-responsive class.
I'm trying to achieve masonry for my panels. This is how it looks currently:
I'd like it to fill the gaps whenever it's possible. I've tried using flexbox but it behave like there was 1 row and after adding more panels it just made them smaller. I also tried using column-countproperty but my panels were separated (panel heading from panel body. blue and white) unless there were as many elements in a row as there were columns (i.e. column-count: 4looked good only if number of panels was multiplicity of 4). Here's how my panel code looks:
<div class="container-fluid">
<div class="col-md-3 ng-cloak" ng-repeat="card in vm.cards" style="margin-bottom: 10px;">
<div class="panel panel-info" style="min-width:235px;">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">{{ card.question }}</h4>
<div class="btn-group pull-right">
Manage
</div>
</div>
<div class="panel-body">
{{ card.answer }}
</div>
</div>
</div>
</div>
Here's the exact page in my repository: Github Reposiory
Also here's the working page: http://188.166.160.66/App/Demo
I'd like to achieve this with css, but if it's impossible I'll give js a shot.
If more screenshots are required I can provide them.
#Edit: I want to prevent my site from having horizontal scrolling.
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
First time using MDL and I've worked out a lot with the grid, but I'm having trouble with getting two header images to show up at the same height.
In the top row of the site, I'd like to have a long, banner-like image at top left, and a square profile photo image next to it, followed by some text for a company or portfolio name.
Here's what that top row looks like:
<div id="container" class="mdl-js-layout mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">
<img src="http://placehold.it/1200x400">
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
<img src="http://placehold.it/400x400">
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="header-text">HEADER TEXT</div>
<div class="bio-text">SUBHEADER TEXT</div>
</div>
</div>
UPDATE: Here's a jsfiddle.
The placeholder images are deliberately larger than they would ever display, as the container is limited to a width of 1200px.
For some reason, when I do this, the second, square image shows up with a shorter height than the first, banner image, no matter how wide the viewport is.
Some suggestions I've found via search have involved flexbox, the properties of which appear to already be incorporated into MDL, but I tried adding it on top anyway without success -- although I'll admit that I'm not absolutely sure I did that correctly.
I appreciate any help anybody can offer.
UPDATE: I solved it by making the first image a background image of its div, since it will likely be a landscape or some other type of environmental image. It's not a perfect solution, so if somebody else has a thought, I'm still open to suggestions. But here's what I did in the meantime (in production, the style is separate, but I'm including it here as shorthand):
<div id="container" class="mdl-js-layout mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet"
style="background-image:url(http://placehold.it/1200x400);
background-size: 100%"></div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
<img src="http://placehold.it/400x400">
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="header-text">HEADLINE</div>
<div class="bio-text">SUPPORTING TEXT</div>
</div>
</div>
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..