I'm trying to make my two buttons center like the one I do with h2 but failed.
Code:
html:
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12">
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
</div>
</div>
</div>
css:
#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;}
#kiosk_btn:active{outline: none; text-decoration: none;}
#kiosk_btn:focus{outline: none; text-decoration: none; }
#kiosk_btn:hover{text-decoration: none; background-color: #213140;}
h2{text-align: center;}
JSFIDDLE
To achieve this you could look into the CSS property transform. Which applies a 2D or 3D transformation to an element. This allows you to rotate, scale, move, skew, etc., elements.
In your case you would use transform: translate(X, Y) where X and Y should be replaced with either % values, pixels or em values
I've edited your fiddle to match give you a general idea of what to do to achieve this: fiddle
basically what you do is you add a class to your div surrounding your buttons, in this case .buttons
The buttons class:
.buttons {
-webkit-transform: translate(20%, 50%);
-moz-transform:translate(20%, 50%);
transform:translate(20%, 50%);
}
The edited HTML:
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12 buttons">
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
</div>
</div>
</div>
Check the updated fiddle.
Add two empty div with col-xs-3. One above two button and one below which fill the width of col-xs-12.
Fiddle uses class for setting button CSS property instead of id
Side Note:
Make sure to use only one id for button or other element.
Use bootstrap inbuilt class text-center for center alignment of heading and for buttons try to use grid offset concept of bootstrap.
Check out the fiddle for your reference.
Your Code contains mulitple Errors:
wrong div nesting
don't use (bootstraps) row and col* on the same element
row is a class in bootstrap, not an id
use ids (#kiosk_btn) only once or make it a class
That put aside, this will get your desired result:
#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;}
#kiosk_btn:active{outline: none; text-decoration: none;}
#kiosk_btn:focus{outline: none; text-decoration: none; }
#kiosk_btn:hover{text-decoration: none; background-color: #213140;}
.col-xs-12 {text-align: center;}
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12">
<div id="kiosk_btn" class="btn btn-default" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default" onclick="">Button 2</div>
</div>
</div>
</div>
Try using the form-inline and text-center classes on a form. It is sort of hacky, but works perfectly as long as the screen is 768px and above, otherwise it will degrade when needed. See a working fiddle here
Related
I am trying to display divs side by side on a page. However, if there is only one col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-md-6. Is there a way to do this using CSS?
Here is the my HTML and CSS:
<div class="col-md-6 textcontent">
</div>
<div class="col-md-6 service">
</div>
<div class="col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}
Flexbox is the way to go here. Here is an example:
.wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.item {
flex-grow: 1;
/* For display purposes */
padding: 1rem;
}
.pink {
background-color: pink;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.orange {
background-color: coral;
}
<section class="wrap">
<div class="item pink">
Content 1
</div>
<div class="item blue">
Content 2
</div>
<div class="item green">
Content 3
</div>
</section>
<section class="wrap">
<div class="item orange">
Content Solo
</div>
</section>
https://jsfiddle.net/willihyde/aqrs410u/1/
If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.
<div class="col-md-12 service"></div>
If you are trying to build this by yourself, Define another class with a name and add the width: 100%;
.col-md-12{
width:100%;
}
Then add that class name to your html class attribute
<div class="col-md-12 service"></div>
I created a website using CSS and Bootstrap. I structured it to be pretty simple and I created some custom container layouts.
To create this I website I used z-index in different places, for the background and for the container. In order to create a hierarchy.
However the rendering of the container doesn't seem to follow the assigned z-index. When I scroll to the bottom of the page and stay there for a while (move mouse randomly etc.) and I scroll back up, the main container of the page disappears.
This is the container css:
.show-portfolio .container {
z-index: 5;
background-color: var(--blog-container-color);
margin: 0 auto;
margin-bottom: 0rem;
padding: 2rem 1rem;
position: relative;
/* border-radius: 20px; */
box-shadow: 0 0 1px rgba(var(--blog-shadow-color), 0.175),
0 0 40px rgba(var(--blog-shadow-color), 0.55),
inset 0 0 6px rgba(var(--blog-shadow-color), 0.9);
border: 5px solid var(--secondary-color);
border-top: 30px solid var(--background-color);
}
And this is the background:
.bg-img-repeat {
background-image: url("/img/background_pattern.jpg");
background-repeat: repeat;
background-size: 35px;
z-index: 0;
position:fixed;
width: 100%;
height: 100%;
}
And this is the container html:
<div class="showcase-image-top mt-5 pt-1">
<div class="title-text text-uppercase"> what is <br> kneehat games </div>
</div>
<section class="show-portfolio justify-content-center align-items-center">
<div class="container">
<div class="para">
Hi, <span class="strong"> my name is Nihat</span>, I'm a Computer Scientist and I develop games for fun.
I use <span class="strong"> Kneehat Games </span> as a platform to publish games for iOS and Android and eventually also other stores.
Thanks for visiting my page and I hope you like the games.
<section>
<div class="row justify-content-center align-items-center mt-3">
<div class="col-12 col-sm-10">
<div class="thanks-email-card thanks-email-font text-center mb-4 align-items-center d-flex justify-content-center">
<i class="fas fa-envelope"></i> kneehatgames#gmail.com
</div>
</div>
</div>
</section>
<div class="footnote"> <i class="fas fa-question-circle"></i> Why Kneehat? I came up with this name because it pronounces almost like my name and it is a combination
of two english words: knee and hat.</div>
</div>
</div>
</section>
As we can see in the image below, the container is actually still placed in the same spot but not rendered anymore. This makes me wonder why the container disappears even if the index is still the same.
The container comes back up if I resize the window or deselect any property in the css class.
The website is: kneehatgames
Here is an image showing the problem
I have two div's when dragging from div1 to div2, the div1 scrollbar will appear and keep extending all the way until I drag the element on div2. How can I prevent the div from extending when I drag the element inside? Whole the element I am dragging does not break?
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-sm hidden-xs">
<div id='external-events'>
<h4>Draggable Events</h4>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
</div>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<hr>
<div id="calendar"></div>
//drop event here
</div>
</div>
Drag panel CSS and size
#external-events {
float: left;
max-width: 260px;
width: 260px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
margin-left: -10px;
}
after dragging
supposed to be like that after dragging
Try to remove overflow-y: auto and add overflow: hidden to your #external-events.
Edit
This answer from Stack Overflow might help shed some light on how to use prevent jQuery from scrolling the page when using draggable elements. Without a working example, I'm not 100% sure this is what you're talking about, but hopefully it proves to be helpful.
Edit 2
In the pictures you posted, it looks like it's scrolling the overflow on the x-axis. That means you'll want to add overflow-x: hidden to the #externalevents styling. You can keep the overflow-y: auto in your code.
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.
Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
...
</div>
What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:
Further requirements and information:
I'm using this in my AngularJS application, so I'd prefer non-jQuery
solutions
If it's in anyway possible, IE9+ support would be nice!
You can use offset method
<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>
Try this,, this may help you
DEMO
Since you want to have dynamic number of columns, flexbox is the best way to go.
As you required, it supports IE10+
.row {
border: 1px solid gray;
display: flex;
justify-content: space-between;
/* Adding for cross browser support */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-sm-1 {
border: 1px solid lightblue;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
</div>
<br>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
</div>
</div>
Yo can do this just with bootstrap and css pushing the columns.
One possible solution can be:
Html:
<div class="container">
<div class="row col-sm-10 col-sm-push-1">
<div class="col-sm-1"></div>
<div class="col-sm-1 col-sm-push-1"></div>
<div class="col-sm-1 col-sm-push-2"></div>
<div class="col-sm-1 col-sm-push-3"></div>
</div>
</div>
css:
body {
margin: 10px;
}
.row {
border: 1px solid red;
padding: 0 4%;
}
.col-sm-1 {
border: 1px solid blue;
padding: 50px;
}
Demo