I want - box to come exactly below + box as shown in the attached image
I have tried this code given below but does not work. Can someone tell me what changes I need to make in the css. This is part of reactjs application.
<div style={{width:"20%",float:"left"}}>
<input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
</div>
Wrap your +/- boxes in a div and use display: flex with flex-direction: column styles on the wrapper div like
<div style={{width:"20%",float:"left"}}>
<input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
<div style={{display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
</div>
</div>
Wrapp em in div with flex
<div style={{ display: 'flex', flexDirection: 'column' }}>
</div>
Related
I have a div element that I set to have a particular width, say 600px. In that div, I have a row of elements that I would like to each have a width greater than the width of that parent div. These elements are encased in a container div to hold the elements of that row as such:
<div className="App">
<div style={{ overflow: "scroll" }}>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ width: "600px" }}>Test 1</div>
<div style={{ width: "600px" }}>Test 2</div>
<div style={{ width: "600px" }}>Test 3</div>
<div style={{ width: "600px" }}>Test 4</div>
</div>
</div>
</div>
However, this just constrains the width of the "Test" divs so that all four divs fit on the screen. I've tried setting the width of the row container div, and this allows the width of the children elements to expand to 600px.
I imagine this has something to do with flexbox, but I'm lost there and would like to know how I can implement the scroll function without restricting the width of the divs.
I figured it out. All I needed to do was set the min-width of the children to the desired width.
Just change your width style into min-with.
Example below:
<div className="App">
<div style={{ overflow: "scroll" }}>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ minWidth: "600px" }}>Test 1</div>
<div style={{ minWidth: "600px" }}>Test 2</div>
<div style={{ minWidth: "600px" }}>Test 3</div>
<div style={{ minWidth: "600px" }}>Test 4</div>
</div>
</div>
</div>
I have a react component that renders a google map as follows:
<div style={{ textAlign: "center" }}>
<h3>This is header text.</h3>
<div>
<LocationHeatMap
center={{ lat: 43.589, lng: -79.644 }}
zoom={11}
positions={data}
/>
</div>
<div style={{ textAlign: "center" }}>
This is some more text. PROBLEM IS WITH THIS.
</div>
</div>
The LocationHeatMap container returns the following
<div className="map-container">
<Map
google={this.props.google}
style={{width: '100%', height: '80%', position: 'relative'}}
className={"map"}
zoom={this.props.zoom}
initialCenter={this.props.center}
onReady={this.handleMapReady}
>
<HeatMap
gradient={gradient}
positions={this.props.positions}
opacity={1}
radius={10}
maxIntensity={50}
/>
</Map>
</div>
But when it renders the problem text appears behind the map div, rather than under it. I have tried position: relative on both the map div, the text div, tried virtually every display and block settings in the browser, but none of them do it. The only thing that works is if I add a top class in css for the text div, but that has its own problems in responsive design. And I am also pretty sure that the top is being applied relative to the header text and not the google map. What can I do to make the problem text appear relatively under the google map.
I know from past experience you can run into issues with a maps div by not using an explicit height. I have included an adjustment below. Hope it helps :)
<div style={{ textAlign: "center" }}>
<h3>This is header text.</h3>
<div class="row">
<div className="map-container row">
<div class="map" google={this.props.google} style={{width: '100%', height: '80%', position: 'relative'}} className={"map"} zoom={this.props.zoom} initialCenter={this.props.center} onReady={this.handleMapReady}>
<HeatMap gradient={gradient} positions={this.props.positions} opacity={1} radius={10} maxIntensity={50} />
</div>
</div>
</div>
<div class="row" style={{ textAlign: "center" }}>
This is some more text. PROBLEM IS WITH TH IS.
</div>
</div>
<style>
.row {
width: 100%;
background-color: lightblue;
}
.map {
width: 100%;
min-height: 200px;
background-color: yellow;
}
</style>
The other thing is making sure the divs are full width:
You can check out an example here:
CodePen Example
I am working with a react component that produces nested divs. I'd like to style force the divs to be on the same line but can only declare styles on the outer container div. Is there a way to achieve this without styling the inner divs? If only I can pass style to the "hello" div.
Currently:
hello
secondLine thirdLine
Desired:
hello secondLine thirdLine
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
make the outer div display: 'flex'
<div style={{ textAlign: "left", whiteSpace: "nowrap",display:"flex" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{ }
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
For more reference :details
if you have access and can change the HTML change the inner <div> to <span> or any inline element, the parent div have display:inline and inner div will take full width ignoring parent having inline display, because the inner div have default display block:
<div style="textAlign:left, whiteSpace:nowrap">
<div style="display:inline">
<span style="display:inline">hello</span>
</div>
<div style="display:inline"> secondDiv </div>
<div style="display:inline"> thirdDiv </div>
</div>
for your jsx code it should be like:
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<span>hello</span>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
I am trying to make three buttons use the full width of a column.
The grid is 3 for the buttons and 9 for other components.
Here's a visual. So basically the buttons should also occupy the space that's marked with red, they should just use the whole column of 3.
Here's App.js where I imported the component:
<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
<div className="row">
<div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
<div className="row no-gutters mt-auto">
<div className="col-sm-3">
<COMPONENT1/>
</div>
<div className="col-sm-9">
<COMPONENT2/>
</div>
</div>
<COMPONENT3 store={store} style={{overflow:'hidden'}}/>
<COMPONENT4/>
<BUTTONS/> --------------------------> Here are the buttons
</div>
<div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
<COMPONENT6 = {store} style={{overflow:'hidden'}}/>
<br/>
<COMPONENT7/>
<COMPONENT8 store={store} clicked={this.clicked}/>
</div>
</div>
</div>
And buttons component:
<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>A</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>B</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>C</Button>
</div>
</div>
And the css for the buttons:
const buttonStyle = {
fontSize: 20,
textAlign: 'center',
display:'inline-block',
width:'100%',
height:100
}
EDIT: Here's a quick pic of the UI
Can you please try the following method:
Give below css rules to row no-gutters mt-auto:
style={{ display: 'flex', flex: 1, flexDirection: 'row' }}
It will work for sure !
Thanks
First of all, I am really new to Bootstrap so please excuse my newbiness.
The problem is that I am trying to create some sort of a thread list and when I shrink the width of the page all the contents keep moving down one another.
This is what I want:
http://img04.imgland.net/CmWzwDR.png
Things just becoming smaller and nothing going out of place
This is what happens:
http://img04.imgland.net/hNKc_Ok.png
Ya its pretty bad
Do you guys know of any way to fix this problem? I don't have to use bootstrap, but I thought it would be easiest.
Thanks
<div style={{marginTop: "80px", marginLeft: "20px", marginRight: "20px"}}>
<div style = {{height: "80px", marginBottom: "10px", padding: "1px 1px 1px 1px", border: "2px solid #000000"}} class="row-fluid" >
<div class = "col-xs-2" style= {{width: "20px", float: "left"}}>
<div class = "row" >
<img src="img/upvote.png" />
<img src="img/downvote.png" />
</div>
</div>
<div class = "col-xs-2" style={{width: "100px", marginLeft: "0px", padding: "0px 0px 0px 0px", float: "left"}}>
<img src={thumbnail} style={{height: "80px", width: "100px"}}/>
</div>
<div class = "col-xs-8" style= {{marginLeft: "10px"}}>
<div class = "row">
<h3 style = {{height: "50px", textAlign: "left", marginTop: "0px", marginBottom: "0px", padding: "0px 0px 0px 0px"}}> {title} </h3>
<p style = {{height: "30px", textAlign: "left", marginBottom: "0px", padding: "0px 0px 0px 0px", overflow: "hidden"}}> {desc} </p>
</div>
</div>
</div>
</div>
Currently this is my site on desktop screen:
img.imgland.net/5VBEme.png
And then this is what it would look like on mobile: img02.imgland.net/cr-MUQd.png
Without explicit samples of your code, I assume it has something to do with the grid prefix you are using. Take a look at http://getbootstrap.com/css/#grid-options which shows the 4x different prefixes:
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
To control the behaviour of your layout on mobile resolutions use the .col-xs-* class. Bootstrap documentation gives a great example: http://getbootstrap.com/css/#grid-example-mixed
The above exmaple shows how to mix classes to have different behaviour on different resolutions:
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Using this code will have your columns start at 50% wide on mobile and bump up to 33.3% wide on desktop. Using these combinations allows you to have quite a fine control over layout across all container resolutions.
EDIT BASED ON CODE SUPPLIED:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<img src="img/upvote.png" />
<img src="img/downvote.png" />
</div>
<div class="col-xs-2">
<img src="#" />
</div>
<div class="col-xs-8">
<h3>{title}</h3>
<p>{desc}</p>
</div>
</div>
</div>
Pay close attention to the Bootstrap docs which show how to use containers and the grid system. I would also take note of the Column nesting as this is a great way to show columns contained within columns: http://getbootstrap.com/css/#grid-nesting
EDIT BASED ON SECONDARY QUESTION
Use the element inspector function in your browser to have a detailed look at your CSS classes and what is creating the padding between columns. You can then call your own custom.css file (or re-compile if you are competent with Less) which overrides the default Bootstrap styling. This will remove the left and right padding in the example code I have supplied:
.col-xs-2, .col-xs-8 {
padding-right: 0px;
padding-left: 0px;
}