I have some centered input boxes.
I am trying to add text to the right side of the bet box. Here is what happens when I do:
How can I fix this? I am using the span element to put them on the same line. What CSS property can fix this?
CODE:
HTML:
<div class="paper">
<h2>Play</h2>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some?</div>
<h3 id="balance">Balance: 1000BTC</h3>
<form>
Bet
<br>
<span>
<input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">Error, that bet is not valid.
</span>
<br>
Chance<br>
<input id ="userchance" value="50" type="text" name="chance">
<br>
<h3>Payout: 0BTC</h3>
<button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet">Autobet</button>
</div>
</div>
CSS:
input[type=text] {
width: 20%;
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
border: 1px solid #555;
text-align: center;
display: inline-block;
}
Make a span around the other text and set it's position to absolute.
https://jsfiddle.net/xuhdy7Lc/
Related
I have the following profile screen with the user's information as per below image.
current screen
This is my code:
displayProfile = (profile) => {
return (
<div className="custom-border">
<div className="container-Profile">
<div className="box-1Profile">
<span>
<label>
<h5>Contact Person: </h5>
</label>
</span>
<h5 className="inline-padding">{profile.contactPerson}</h5>
<br />
<span>
<label>
<h5>Company Name: </h5>
</label>
<h5 className="inline-padding">{profile.companyName}</h5>
</span>
<br />
<span>
<label>
<h5>Mobile Number: </h5>
</label>
<h5 className="inline-padding">{profile.mobileNo}</h5>
</span>
<br />
<span>
<label>
<h5>Work Number: </h5>
</label>
<h5 className="inline-padding">{profile.workNo}</h5>
</span>
<br />
<span>
<label>
<h5>Industry/Sector: </h5>
</label>
<h5 className="inline-padding">{profile.industry}</h5>
</span>
<br />
</div>
</div>
<button className="btn btn-primary" onClick={this.showModal}>
{" "}
Edit Profile
</button>
This is my CSS:
/*Profile Page*/
.container-Profile{
display: flex;
padding: 10px;
flex-grow: 1;
}
.container-Profile div{
border: 1px black solid;
padding: 10px;
}
.box-1Profile{
width:50%;
}
I would like the h4 tags to be in line with one another so that it looks neater as per the below image:
envisaged screen
Is this possible and how do I do this?
You should have Contact Person, Company Name and others in one column (inside div with display:flex; flex-direction:column;). Jack Sparrow, Pirate and others should be in other column (inside div with display:flex; flex-direction:column;) and that two columns you should put inside div with display:flex.
Put your first <h5> tag inside <span> tag and instead of your CSS code use the below code:
*{
padding:0;
margin: 0;
}
/*Removes the default margin & padding.*/
span{
display: flex;
margin-block: 15px;
}
/*Display your span content in flex & give it a margin(according to you) from top and bottom.*/
h5{
padding-left:15px;
}
/*Add a little bit of padding to the data from left so it don't stick with label*/
.box-1Profile{
border:1px solid #000;
}
/*Add border to your content*/
I have an info icon which when the user hovers over, is able to see more information. The icons are pngs and I DO NOT want to change the position of the image, so is there any idea about using tooltips with images in my case? I also would like the tooltip to look like this:
Example Tooltip
This is my HTML:
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Ipad Mode</p>
</div>
<div class="infoIcon">
<img src="images/info.png" alt="info icon">
</div>
<div class="settings">
<img src="images/settings.png" alt="settings icon">
</div>
</div>
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Mac Mode</p>
</div>
<div class="infoIcon">
</div>
<div class="settings"></div>
</div>
</div>
Thank you in advance
Codepen: https://codepen.io/D4SH13/pen/jOmOWqb
1st: Using Title tag in <img> element.
<div class="infoIcon">
<a href="#">
<img title="Extra Info" src="https://cdn.onlinewebfonts.com/svg/img_151567.png" alt="info icon" />
</a>
</div>
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/poPoeNy
2nd: Using <span> element.
Take a <span> element and put it inside your tootltip container.
<div class="infoIcon">
<!-- New span element -->
<span class="extraInfo">Extra Info</span>
</div>
Make the <span> postion: absolute relative to your tooltip container position: relative and add some styles to <span> element.
.infoIcon {
position: relative;
}
.extraInfo {
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
}
Now, change the visibility of the span element. So that it can stay hidden until the tooltip is hovered.
visibility: hidden;
i.e.
.extraInfo{
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
visibility: hidden;
}
Now, when your tooltip is hover make the span element visible.
.infoIcon:hover .extraInfo {
visibility: visible;
}
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/xxdxgrO
Hope this solves your problem
I have two words that will change after some JavaScript coding. They will be arrays. I can perform the JavaScript coding well, but I want them to be aligned instead of one above the other:
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
My CSS coding:
.pTextIng {
margin-left: 45%;
}
.pTextPor {
margin-left: 45%;
}
The words "Inglés" and "Português" will become columns after some Javascript commands, but they are not aligned and I want them to be aligned.
.pTextIng {
border:1px solid black;
width:80px;
display:inline-block;
}
.pTextPor {
border:1px solid red;
width:80px;
display:inline-block;
}
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
<p> automatically inserts a line break after the text. If you do not want this you should use <span>. I assume you want both words on the same line as your input field, so you should put both <span> elements inside a <div> and apply margin-left to that.
HTML:
<div class="indentation">
<span id="pTextIng" class="pTextIng">Inglés</span>
<span id="pTextPor" class="pTextPor">Português</span>
</div>
CSS:
.indentation {
display: inline-block;
margin-left: 45%;
}
If you make a div with both p inside like:
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<div class="idiomas">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
</div>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
And then you make this div element flex and flex-direction: row
.idiomas{
display: flex;
flex-direction: row;
}
You need to add vertical-align: top; to fix the issue
.testAlign p {
display: inline-block;
vertical-align: top;
/* other styles */
}
and also that <p> tags need to be inside a <div>
<div class = "testAlign">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
</div>
I'm new to bootsrap, so this question might be trivial, but I'm having problem sizing labels.
Here is a simple code snippet:
<div class="container">
<div class="row">
<div class="col-xs-3">
<input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
</div>
<div class="col-xs-9">
<label class="label-info label col-xs-12">This label is too little!</label>
</div>
</div>
</div>
You can find a working JSFiddle here:
http://jsfiddle.net/DTcHh/2446/
As you can see the input occupies the 3 columns it is assigned correctly and is also taller than the label. I'd like the label to:
Be the same height as the button
Fill up all the available horizontal space (the 9 columns it is assigned, as opposed to only filling up the space needed for the text, as it is doing now).
The behavior is correct for the button thanks to the btn-block class which makes it fill the available 3 columns, but there isn't an equivalent for the label.
How can I achieve this? It's probably really simple but I'm a noob at web stuff and bootstrap in particular, can anybody enlighten me?
The base .label style won't allow that. My advice would be to define your own .label-block style which you can use in place of label. Something like this would work
.label-block {
font-weight: normal;
display: block;
padding: 6px 12px;
margin: 0;
border: 1px solid transparent;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
width: 100%;
}
And then within your html, just use that style instead of label
<div class="container">
<div class="row">
<div class="col-xs-3">
<input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
</div>
<div class="col-xs-9">
<label class="label-info label-block">This label is too little!</label>
</div>
</div>
</div>
JSFidlle for reference.
I'm trying to get 'ADD' and the search box to sit next to each other, side by side and align them right.
I've checked out other answers and I have implemented an inline-block solution, they sit side by side (but for some reason it's not working on the fiddle). How can I align the elements to the right of their parent?
<div class="span6">
<h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
Fiddle
JSFiddle does not use SCSS by default. Expand the Languages menu on the left and choose "SCSS" instead of "CSS". This should result in the elements aligning side-by-side.
To align the nav to the right, make both span6's 50% width and float/text-align the nav right.
.span6{
float: left;
width: 50%;
}
nav{
float: right;
text-align: right;
...
}
Fiddle
Erik Gillepsie is right. Here is your Fiddle in CSS structure and with the correct HTML input tag: http://jsfiddle.net/6MY8g/
<input name="search" size="10" type="search" placeholder="Search" results=5 />
Edit: to align right (only the second div), add a class "right" to your div and make it float right.
Try This : just replace your code with this
<div class="span6">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
<a class="btn" href="/add">ADD</a>
</form>
</nav>
So, if i'm understanding you correctly you want the title "Article Manager" and the search box and the ADD link to all be on the same line. AND, you want the "Article Manager" to be on the left, and the search and add group aligned to the right, correct?
Create a container for your row, and put everything in it, and give it 100% width so it spans the entire width of the page. Then float the title to the left, and float the search box group to the right. Done and done.
<div class="header-container">
<div class="span6 title">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6 search">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
</div>
http://jsfiddle.net/9p2VM/7/
Your CSS is not well-formed in the fiddle. Without changing a line of code in the fiddle ie. by just indenting the CSS properly, your code works fine.
This is how your CSS is:
.span6{
float: left;
}
nav{
white-space: nowrap;
.btn{
display: inline-block;
}
form{
margin: 0;
padding: 0;
display: inline-block;
input[type=search] {
margin: 15px 0 0 0;
}
}
}
Change it to:
.span6 {
float: left;
}
nav.span6 {
white-space: nowrap;
float:right;
}
.btn {
display: inline-block;
}
form {
margin: 0;
padding: 0;
display: inline-block;
}
input[type=search] {
margin: 15px 0 0 0;
}
And it works fine. See here->http://jsfiddle.net/9p2VM/8/
Hope this helps!!!