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>
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 had encountered to an interesting CSS challenge. In the following code I was able to vertically aligned the text and input. The part I couldn't manage was, without breaking the vertical alignment (text - input) I need to put footer text under the input.
.container {
width: 300px;
}
.head {
display: inline-block;
vertical-align: middle;
width: 20%;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col input {
width: 100px;
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
Also, container div height should effect from footer text as well. So using absolute will not work for this case.
I already aware some JavaScript or CSS hack solutions. But for this case, I want to proceed with a proper way. How can we achieve this properly?
UPDATE
I forgot to mention before. Footer text could be multiple lines as well. It should cover both inputs underneath.
Flexbox can do that but it requires restructuring the HTML and altering a class or two...oh, and a pseudo-element.
.container {
width: 300px;
display: flex;
margin: 1em;
border: 1px solid red;
}
.head {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.col,
.second {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 .25em;
}
input {
width: 100px;
}
.col:before {
content: "";
height: 1.2em; /* or whatever your line-height is */
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
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/
I'm trying to reproduce a table with the CSS display: table/table-row/table-cell properties. However, it seems that <form> elements contained in tables created this way mess up with the tables' structure. Alignment would be off, a full row containing a form would be limited to the width of the previous' row first cell, etc. It goes all over the place.
Is it possible to make forms behave like other elements in this situation? I defined forms as display: inline in the CSS but that doesn't help.
My code (Simplified it for readability)
form {
display: inline;
}
.calendarTable {
display: table;
margin: auto;
width: 60%;
}
.calendarRow {
display: table-row;
}
.calendarCell {
display: table-cell;
text-align: left;
padding: 10px;
vertical-align: middle;
}
<div class="main">
<div class="calendarTable">
<div class="calendarRow">
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
</div>
<?php some php loop ?>
<form method="post">
<div class="calendarRow">
<p class="calendarCell">
<some inputs>
</p>
<p class="calendarCell">
<some inputs with formaction>
</p>
</div>
<br>
</form>
<?php end php loop; ?>
<form method="post">
<div class="calendarRow">
<p class="calendarCell">
<some inputs>
</p>
<p class="calendarCell">
<some inputs with formaction>
</p>
</div>
</form>
</div>
</div>
UPDATE
As per OP's request,
I wanted to know if it is possible to have forms behaving properly in this scenario.
Indeed it is possible, I'm not sure if it's valid, but it works flawlessly.
SOLUTION
Assign each <form> display:table-row
See updated Snippet.
There were <form>s wrapped around the .calendarRows
The 2nd and 3rd rows had only 2 cells each, while the 1st row had 3 cells.
If we were to apply invalid HTML to <table>, <tr>, and <td>, then they would also perform erratically as well. In this Snippet I have:
Removed the <forms>
Added 1 cell to the 2nd and 3rd rows
Added table-layout:fixed to control the table's behavior even more. Note that I have declared each cell to be 32% wide. Normally, this would be hard to accomplish because of the 3rd column having more content than the other columns.
Added outlines to demonstrate how cells are correctly aligned.
SNIPPET
.calendarTable {
display: table;
margin: auto;
width: 60%;
table-layout: fixed;
}
.calendarRow {
display: table-row;
}
.calendarCell {
display: table-cell;
text-align: left;
padding: 10px;
vertical-align: middle;
width: 32%;
}
p {
outline: 1px solid black;
}
.red {
color: red;
font-weight: 700
}
<div class="main">
<div class="calendarTable">
<form class="calendarRow">
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
</div>
</div>
I want Text Left and Text right should come in same line and I can't restructure HTML.And if I use Absolute position I am not sure how it will behave in different devices and screen size due to yellow area(). Can I give absolute position with reference to parent div(ms-srch-result)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top" style="display:block;width: 700px;">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 1: (remove inline styles)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 2: (flex-box)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
width: 200px;
}
.ms-srch-result div{
margin: 10px;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 3: (flex property)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
}
.ms-srch-result div{
flex: 1;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Use something like this in your CSS stylesheet:
#UpScopeLinkTop, #ResultCount {
width: 45%;
}
(Adjust the value as you need it)
P.S.: erase the 700px width from the HTML tag of #UpScopeLinkTop
You don't need floats. Instead of divs inside the big div, use spans.
<div id="thebigdiv">
<span style="display:inline-block";>
Text left
</span>
<span style="display:inline-block";>
Text right
</span>
</div>