Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 20 days ago.
Improve this question
When an h2 element reaches double digits then it automatically ads a padding to the left (check image) which messes with my "container's " width.
Any ideas how to remove that?
If I can not remove that, How can the black box surrounding it keep the same dimensions and not change when numbers are added?
HTML
<body>
<main>
<div class="col1">
<h1>HOME</h1>
<div class="h2-cont">
<h2 id="home-score">0</h2>
</div>
<div class="btns">
<button onclick="add1H()">+ 1</button>
<button onclick="add2H()">+ 2</button>
<button onclick="add3H()">+ 3</button>
</div>
</div>
<div class="col2">
<h1>GUEST</h1>
<div class="h2-cont">
<h2 id="guest-score">0</h2>
</div>
<div class="btns">
<button onclick="add1G()">+ 1</button>
<button onclick="add2G()">+ 2</button>
<button onclick="add3G()">+ 3</button>
</div>
</div>
</main>
.h2-cont {
margin: 0;
margin-bottom: 2.6rem;
background-color: #080001;
padding: 3rem 6rem;
}
h2 {
margin: 0;
font-family: "Cursed Timer ULiL";
color: #F94F6D;
font-size: 9rem;
}
Nop, there is no problem with your code.
Your font is monospaced, so any character will have the same width and any more digits you put, the digits container will be reajusted.
If you change your "12" to "02" it will be more clear to see their width and that they are centered.
This is not padding and a space may be written before or after(" 12" instead "12") when you write the numbers (or jacascri creates the numbers).
If you checked and there is still a problem, it is suggested to activate the monospace function of the font so that all the numbers have a fixed width.
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/
I have been struggling to get the contents of a boostrap well to center. My badge goes to the right, instead of under the arrows, and my arrows (aka, vote buttons) are not centered in the well either. I have attached a screenshot, and here is the relevant code:
HTML:
<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
Here is the only custom CSS beyond default bootstrap:
/* Voting styling */
.votingButton{
cursor: pointer;
}
Here is the screenshot:
try class="text-center", that should do the trick, if not you can reposition it using style="postion: absolute; margin-left: -5px;", if you're not too picky about the well size, that might be another problem as "well". fix the size to be a little bigger, that would help.
Your column width is too small to render correctly. You need to change col-md-1 col-sm-1 to col-md-2 col-sm-2 or reduce the padding inside the div.
I have a 3-column layout that works pretty well:
http://jsfiddle.net/nicorellius/YNyHW/7/
My goal is to add a pre-existing modular unit into the center div, the one with class two-inner. The markup is like so:
<html>
<head></head>
<body>
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="two">
<div class="two-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
</body>
</html>
The CSS can be seen in the fiddle. Part of the modular unit is actually built from some PHP where some data from a database is fetched and displayed. I have some arrays that I'm using for testing that mimic 6 entries and gives the modular unit a 2-wide by 3-tall box layout. My problem is that when I add this unit into the layout above, I get something like the test site below.
The markup for the modular unit is like so:
<section class="unit">
<section class="buttons margin-top-2em">
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 1</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 2</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 3</button>
</div>
</section>
<div class="row">
<?php // loop through some arrays to get module unit ?>
</div>
</section>
I've tried various tweaks to try and get it up but the only thing that does it is making the heights of the outer classes one, two, and three close to zero.
Although I've tried changing heights and other bits to get it to fit, I'm still having trouble figuring out why that center div won't go up. What am I missing?
The CSS for the unit class is in the fiddle. On it's own, it works OK, and I have some breakpoints that collapse it down into a single column. I just cant get passed this part...
EDIT
After trying some ideas from #kozlovski5, I am able to get the divmoving up and down as I need. But there is something going on that is making me uneasy. I'm not too familiar with the display: table, display: table-cell layout so Im sure I'm missing something. For example, when I add text to the divs in question, either the classes one, two, or three, or the inner classes, the adjustments recommended by #kozlovski5 go away. So in other words if I don't use top: -37.5em; and just fill the divs with text, everything seems to work as it should. It's when I try to model the layout with bordered sections that I get the strange behavior.
I ended up going with floats instead. See test site above for final.
I applied:
div > .modular {
display: block;
}
This seems to solve the problem. Here is an updated jsFiddle. http://jsfiddle.net/YNyHW/4/
OP has provided a test case for his website, so my updated answer is:
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
position: relative;
top: -596px;
left: 0;
}
Ugghhh.. Another Edit
I think the whole display: table and div > div. { display: table-cell;} is causing this issue and instead of working on patches let's hit the problem head straigh on instead of working on fixes.
Just get rid of the display table etc. And use floats instead here is an example:
http://jsfiddle.net/YNyHW/6/
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me