I have a couple of SVG that get rendered like this
export const MenuHeaderTab = (props: RenderableProps<Props>) =>
{
const css = props.isActive ? "menu-tab menu-tab-selected" : "menu-tab";
return (
<div onClick={() => props.onClick()} className={css}>
{props.children}
</div>
)
}
the problem i have is that in desktop mode it works fine cause they render in the order that i want them to. the problem is that in mobile portrait mode i want one of the rendered SVG to be first in the order (row). So i thought i use row and just set the className on the SVG
so here is the sass/css
#media all and (orientation: portrait)
{
.menu-tab {
width: 10%;
height: 20%;
margin-left: 4vw;
}
.menu-close-button {
order: -1;
}
.menu-leaderboard-button {
order: 2;
}
.menu-prize-button {
order: 3;
}
.menu-rules-button {
order: 4;
}
so i even provided order to all the SVG and -1 to the one that should be first, but they all stay in the exact same order still. Anyone have any clue why this happens.
Order attribute only works if the father element use display: flex
Assuming the .menu-tab is the father's div of this elements .menu-close-button, .menu-leaderboard-button, .menu-prize-button, .menu-rules-button, you just need to set a display: flex to the .menu-tab
Bellow follow an example of the code:
Look athe the close button, its the last element but how its set -1 as order, it become the first element
.menu-tab {
width: 10%;
height: 20%;
margin-left: 4vw;
display: flex;
}
.menu-tab a{
margin-right: 10px;
}
.menu-close-button {
order: -1;
}
.menu-leaderboard-button {
order: 2;
}
.menu-prize-button {
order: 3;
}
.menu-rules-button {
order: 4;
}
<div class="menu-tab">
leaderboard
Prize
Rules
Close
</div>
Related
I couldn't get a JSFiddle to work properly with React and some other dependencies, so I hope the link to this Github repo is sufficient for demonstrating the issue:
https://github.com/ishraqiyun77/button-issues/
Basically, a group of buttons is rendered and they should be auto-widened to fill white space and take up the whole row. This works in Chrome, Edge, Safari, and Firefox. It looks like this:
This isn't happening in IE. I've been messing with it for hours and haven't made much progress:
Here is the code, although could clone the repo I posted above:
// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
Button,
Col,
Modal,
ModalBody,
ModalHeader,
Row
} from 'reactstrap';
import styles from '../assets/scss/app.scss';
class TestPrint extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
})
}
renderContent() {
let buttons = [];
for (let i = 1; i < 50; i++) {
buttons.push(
<Col key={i}>
<Button
key={i}
className='cuts-btn'
>
{i} - Test
</Button>
</Col>
);
};
return buttons;
}
render() {
return (
<div>
<Button
style={
{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
}
onClick={this.toggle}
>
Open Modal for Buttons
</Button>
<Modal
size='lg'
isOpen={this.state.modal}
toggle={this.toggle}
className='results-modal'
>
<ModalHeader toggle={this.toggle}>
Button Issues
</ModalHeader>
<ModalBody>
<div className='results-bq-cuts'>
<Row>
{this.renderContent()}
</Row>
</div>
</ModalBody>
</Modal>
</div>
)
}
}
ReactDOM.render(<TestPrint />, document.getElementById('app'));
.results-modal {
max-width: 1200px;
.modal-content {
.modal-body {
margin-left: 13px;
margin-right: 13px;
.results-bq-cuts {
width: 100%;
.col {
padding:2px;
}
.cuts-btn {
font-size: 11px;
padding: 3px;
width: 100%;
box-shadow: none;
}
// .col {
// padding: 2px;
// display: table-cell;
// flex-basis: 100%;
// flex: 1;
// }
// .cuts-btn {
// font-size: 11px;
// padding: 3px;
// width: 100%;
// box-shadow: none;
// }
}
}
}
}
I have all of the <Button> wrapped in <Col> because that should be what is filling the white space by increasing the size of the button.
Thanks for the help!
IE11 doesn't like working out the width of flex items. If you add flex-basis: calc( 100% / 24 ); to .col it works :) Obviously use any width you want, but what I've given replicates the 21 boxes on one line. But essentially flex-basis needs a defined width to work.
Or add an extra class to each element (such as col-1 ) This'll also achieve the same thing.
Given this markup:
<div class="parent" data-active="typeA">
<div class="child" data-show="typeA">Show only when parent=typeA</div>
<div class="child" data-show="typeB">Show only when parent=typeB</div>
<div class="child" data-show="typeC">Show only when parent=typeC</div>
</div>
I'm trying to write a globally applicable LESS rule that only displays a child when its data-show attribute matches the parent's data-active attribute.
Something like this:
.parent {
.child { display:none; }
&[data-active="?"] .child[data-show="?"] { display:block; }
}
...where ? should not be a fixed value, but a condition that applies no matter the value, as long as they are the same.
Any ideas?
As LESS gets compiled to CSS and there is no generic approach for doing this in CSS, I only come up with a solution that requires you to know every possible type.
.parent {
.child { display: none; }
&[data-active="typeA"] {
.child[data-show="typeA"] { display: block; }
}
&[data-active="typeB"] {
.child[data-show="typeB"] { display: block; }
}
&[data-active="typeC"] {
.child[data-show="typeC"] { display: block; }
}
}
Depending on your preferences and to avoid redundancy you could also define a function for adding the different types.
.parent {
.child { display: none; }
.addType("typeA");
.addType("typeB");
.addType("typeC");
}
.addType(#type) {
&[data-active="#{type}"] {
.child[data-show="#{type}"] { display: block; }
}
}
And if you want to make this even more generic, you could define an array of types and call .addType for each of the types like this:
#types: "typeA", "typeB", "typeC";
.parent {
.child { display: none; }
.-(#i: length(#types)) when (#i > 0) {
#type: extract(#types, #i);
.addType(#type);
.-((#i - 1));
} .-;
}
.addType(#type) { /* see above */ }
I have this, but I feel 4 is too big for my sidebar width and 3 is too small (it has to add up to 12).
<div class="col-md-8">
<div class="col-md-4">
I tried this but it doesn't work:
<div class="col-md-8.5">
<div class="col-md-3.5">
Is there another way to get a similar outcome?
Thanks for your help!
To expand on #isherwood's answer, here is the complete code for creating custom -sm- widths in Bootstrap 3.3
In general you want to search for an existing column width (say col-sm-3) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths.
.col-sm-3half, .col-sm-8half {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 768px) {
.col-sm-3half, .col-sm-8half {
float: left;
}
.col-sm-3half {
width: 29.16666667%;
}
.col-sm-8half {
width: 70.83333333%;
}
}
For a 12 columns grid, if you want to add half of a column (4,16667%) to each column width. This is what you do.
For example, for col-md-X, define .col-md-X-5 with the following values.
.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667
I rounded certain values.
Secondly, to avoid copying css code from the original col-md-X, use them in the class declaration. Be careful that they should be added before your modified ones. That way, only the width gets override.
<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>
Finally, don't forget that the total should not exceed 12 columns, which total 100%.
I hope it helps!
You could certainly create your own classes:
.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}
I'd do this before I'd mess with the default columns. You may want to use those inside these.
You'd probably also want to put those inside a media query statement so that they only apply for larger-than-mobile screen sizes.
Bootstrap 4.1+ version of Antoni's answer:
The Bootstrap mixin is now #include make-col($size, $columns: $grid-columns)
.col-md-8half {
#include make-col-ready();
#include media-breakpoint-up(md) {
#include make-col(8.5);
}
}
.col-md-3half {
#include make-col-ready();
#include media-breakpoint-up(md) {
#include make-col(3.5);
}
}
Source:
Official documentation
Bootstrap 4 Sass Mixins [Cheat sheet with examples]
You can use Bootstrap's own column mixins make-xx-column():
.col-md-8half {
.make-md-column(8.5);
}
.col-md-3half {
.make-md-column(3.5);
}
you can customize bootstrap stylesheet, as in:
.col-md-8{
width: /*as you wish*/;
}
Then, set the media query for that too, as in:
#media screen and (max-width:768px){
.col-md-8{
width:99%;
}
}
I currently have two Views that are using the same layout. However, they differ from each other in the following aspect:
View Foo:
<div class="MajorSection" id="foo">
</div>
View Bar:
<div class="MajorSection" id="bar">
</div>
And I want to declare #labelWidth differently between these two classes in one .less file so that I don't need to repeat myself with the following code.
.MajorSection {
#labelWidth: 10em;
.editor-label {
width: #labelWidth;
}
input, textarea {
width: (#editorWidth)-(.5em); //border & padding
}
}
In View Foo I want #labelWidth to be 10em, and in Bar I want it to be 20em. Is there anyway to do that?
I think the simplest method to achieve this is to define "depended" styles via parametric mixin, e.g.:
.MajorSection {
#foo& {
.labelStyles(10em);
}
#bar& {
.labelStyles(20em);
}
.labelStyles(#width) {
.editor-label {
width: #width;
}
}
input, textarea {
width: (#editorWidth - .5em); // border & padding
}
}
CSS output:
#foo.MajorSection .editor-label {
width: 10em;
}
#bar.MajorSection .editor-label {
width: 20em;
}
.MajorSection input,
.MajorSection textarea {
width: ...;
}
The code we used is from the less file that's related to positioning. The website looks great in safari, firefox, and chrome and looks off in IE version 7, 8, and 9. Does bootstrap have a known issue with IE? Probably not since it's so widely used. But I can't really identify what's wrong. Btw, here are two sample pages with the visual bug in Internet Explorer: http://www.presspass.me and a simpler page: http://www.presspass.me/about or you can take a look at the screenshots.
My guess is that it's something small, any help would be appreciated!
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
// Variables
// Can also be 24 / 20 / 20
// Or 16 / 40 /20
#gridColumns: 24;
#gridColumnWidth: 20px;
#gridGutterWidth: 20px;
#extraSpace: (#gridGutterWidth * 2); // For our grid calculations
#siteWidth: (#gridColumns * #gridColumnWidth) + (#gridGutterWidth * (#gridColumns - 1));
// Mixins
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: "";
zoom: 1;
}
&:after {
clear: both;
}
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.fixed-container() {
width: #siteWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
.columns(#columnSpan: 1) {
width: (#gridColumnWidth * #columnSpan) + (#gridGutterWidth * (#columnSpan - 1));
}
.offset(#columnOffset: 1) {
margin-left: (#gridColumnWidth * #columnOffset) + (#gridGutterWidth * (#columnOffset - 1)) + #extraSpace;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
float: left;
margin-left: #gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(#columnSpan: 1) {
.gridColumn();
.columns(#columnSpan);
}
// STRUCTURAL LAYOUT
// -----------------
/*
body {
margin: 0;
}
*/
// Container (centered, fixed-width layouts)
.container {
.fixed-container();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
> .sidebar {
position: absolute;
top: 0;
left: 20px;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific
> .content {
margin-left: 240px;
}
}
// BASE STYLES
// -----------
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
.row {
.clearfix();
margin-left: -#gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to #dhg for the idea
.row > [class*="span"] {
.gridColumn();
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.row {
> .offset1 { .offset(1); }
> .offset2 { .offset(2); }
> .offset3 { .offset(3); }
> .offset4 { .offset(4); }
> .offset5 { .offset(5); }
> .offset6 { .offset(6); }
> .offset7 { .offset(7); }
> .offset8 { .offset(8); }
> .offset9 { .offset(9); }
> .offset10 { .offset(10); }
> .offset11 { .offset(11); }
> .offset12 { .offset(12); }
}
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.row {
> .offset-one-third { margin-left: 340px; }
> .offset-two-thirds { margin-left: 660px; }
My guess is that it's something small, any help would be appreciated!
It is something small.
You're missing a doctype. Add as the very first line:
<!DOCTYPE html>
Without a valid doctype, your page is displayed in quirks mode.
Open the Developer Tools (press F12) to see which mode is actually being used.
Also sometimes you have to override group policies that may force IE into non compatibility mode. We have to do this at my organization because group policies force this mode on the intranet.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I had a similar issue with Bootstrap 2.2.1. It looked great in IE 9 where I was developing it. However, one of the users is on IE 7 (don't ask, ugh) and for the most part the header was not showing up correctly. The solution was to change all of the HTML 5 tags (header, footer, article and section) to divs. That did the trick for me.
I had tried just doing the above suggestions with DOCTYPE and such but nothing totally worked for me until that.