In bootstrap we can prepend an input using the following code:
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text">
</div>
I want to achieve exactly the same thing in jQuery Mobile, but without using bootstrap.
I can see that the relevant CSS code from bootstrap is as follows:
.input-prepend {
display: inline-block;
font-size: 0;
margin-bottom: 10px;
vertical-align: middle;
white-space: nowrap;
}
.input-prepend .add-on {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 20px;
line-height: 20px;
min-width: 16px;
padding: 4px 5px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: auto;
}
After adding these to my custom CSS, I still couldn't figure out what's missing. But certainly something is missing.
Can someone please guide me.
Here is the example fiddle: http://jsfiddle.net/LittleLebowski/Mgq9W/
Leave the rest of the css the same, but add this to .input-prepend .add-on rule. You could also use vertical-align:top. I tested it using your fiddle link.
.input-prepend .add-on {
vertical-align: bottom;
}
You could also try adding..
.input-prepend input {
position: relative;
margin-bottom: 0;
vertical-align: top;
}
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
I have researched this problem for several days now and have found no solution so far. If this is just a beginners questions with a lot of answers out there I apologise, and please point me in the right directions.
I am trying to developp a "Headline" or "Banner" to be displayed at the top of my website.
I have a colored box, in which i want to display an image (a little off the left side), right next to it some text (the name of the website) and then centered in the middle of the box again some very short text (the name of the document, Home, Contact, things like that).
So it should look like this:
<-space-><-Image-><-Website name-><----------centered text------------------------>
So far whatever I have tried just gets me this:
<-space-><-Image-><-Website name-><-text at the left--------------------------------->
I am currently using a div element for the box with three different elements so i can format them separately in the style sheet. The main problem seems to be that the last header (Centered Text) is just created around the text, and not until the right edge of the box. So aligning left, right or in the center makes no difference.
<div class="box blue-box ">
<img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon">
<h8 class="white-text-header">Website name </h8>
<h9 class="white-text-main-header"> Centered Text</h9>
</div>
with css style sheet:
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon{
width: 120px;
height: auto;
align-items: left;
}
</style>
If anyone knows a better solution, I would be very grateful. Thank you for spending your time helping me.
You've duplicated "white-text-header" class definition. Also , left out "blue-box" class' closing brace. The code should be written as followed.
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
</style>
h8 and h9 probably aren't the elements you want to be using. Update these and you will get what you want. You need to update your css classes. You have some bad syntax and duplicated names.
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
display: inline-block;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
Here is the fiddle closer to what you want: https://jsfiddle.net/475sdf9w/26/
h8 and h9 are not standard heading tags. Related question
You can reuse text styling properties by adding the rules to the parent (font-family, font-size, and color.
font-size needs a unit -- 24px
You can create your layout with Flexbox. Learn more here.
body {
margin: 0;
}
.blue-box {
background-color: #401841;
padding: 10px;
border: 1px solid white;
border-radius: 4px;
font-family: Arial;
font-size: 24px;
color: white;
display: flex;
align-items: center;
}
.blue-box img {
/* adds space to the left of the image */
margin-left: 20px;
}
.white-text-main-header {
margin: auto;
}
<div class="box blue-box ">
<img class="icon" src="https://unsplash.it/120" alt="icon">
<h5 class="white-text-header">Website name </h5>
<h6 class="white-text-main-header"> Centered Text</h6>
</div>
I'm having the following code:
<a class="my-profile" href="link">
<div class="my-picture">[picture]</div>
<div class="my-fields">
<span class="my-name">[name]</span>
<span class="my-medal">[medal]</span>
</div>
</a>
It has the following theming:
.my-profile {
background-color: black;
color: white;
display: inline-block;
height: 35px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.my-picture {
display: inline-block;
padding-top: 5px;
height: 25px;
width: 25px;
}
.my-fields {
display: inline-block;
font-size: 13px;
padding-left: 5px;
padding-top: 8px;
vertical-align: top;
}
.my-medal {
padding-left: 5px;
height: 16px;
width: 16px;
}
I'd like to add some more top padding to the medal field, but when I add padding-top: 5px to the .my-medal class, the name field is moved too.
Why does this happen and how can I prevent it?
Simply set vertical alignment to the top on both the .my-name and .my-medal elements:
.my-name, .my-medal {
vertical-align: top;
}
JSFiddle demo.
(Note that to show this working I've had to also specify display: inline-block as you haven't provided any styling for those two elements in your question).
I'm attempting to center the logo within my header. I tried the display:block and margin:auto within my #site-title class, but it isn't working.
The link to the code is: http://pastebin.com/iNvhTSBL
And the CSS is: http://pastebin.com/f5mPTjuU
I'm not sure what to do...maybe I'm not doing the CSS correctly?
Any help would be appreciated! The CSS was from a wordpress theme, just letting you all know.
Thank you!
Next time, post only the relevant code bits in your question. That makes it MUCH more likely people will bother to answer.
If this is the code you are referring to:
<div id="header">
<div id="site-title">
<img src="http://i.imgur.com/ysxPP.jpg">
</div>
<!-- other bits stripped for brevity -->
<div class="clear"></div>
</div>
and the css is this:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
float: left;
width: 100%;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
display:block;
margin: auto;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
}
Then you need to revise the css as follows:
1. remove the float: left from the site-title. Unecessary.
2. Note that your padding-right of 40px is going to cause problems with your width: 100%
3. Add text-align: center; to the site-title.
4. Add margin: 0 auto; to your site-title a
The following code will do what you want:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
width: auto;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
text-align: center;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
margin: 0 auto;
}
Add this to #site-title
text-align: center;
This should work:
#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>