I developed a text area that allows me to associate people. My problem is placing the responsive button (always in the bottom right) and making the text not "pass" over it.
Can anyone help me?
DEMO
css
.Sendbtn {
width: 30px;
height: 30px;
height: auto;
float: right;
margin-right: 21px;
margin-top: -76px;
position: relative;
cursor: pointer;
}
HTML
<dx-html-editor>
<dxi-mention
valueExpr="text"
displayExpr="text"
[dataSource]="employees"
></dxi-mention>
</dx-html-editor>
<img
class="img-responsive Sendbtn"
src="https://www.freepnglogos.com/uploads/search-png/search-icon-clip-art-clkerm-vector-clip-art-online-0.png" alt=""/>
Problem
The text passes over the button :(
If you dig down into the dx-html-editor element you can find the <p> element that contains the text. If you give this a margin-right the text will stop running over the button.
.dx-htmleditor .ql-container .ql-editor p {
margin-right: 30px;
}
You might need to play around with the exact selectors to get it perfectly right but that should be step in the right direction.
Related
So I want to put a h1 tag in the bottom right corner. What I have currently is below; however, this is very tedious and I want it to always be in the corner. Currently the way I am doing it is based off of my computer's screen, but if someone uses a computer with a different size screen then the tag will not be in the right place. Would there be any other way I could do this so that the tag would be in the same place for all size monitors?
.subH {
font-family: Sedgwick Ave Display;
font-size: 10px;
padding-top: 505px;
padding-left: 1170px;
color: white;
}
<h1 class='subH'>Created by Hybrid Alpaca Game Studios</h1>
Use position: fixed
Example:
h1 {
position: fixed;
bottom 6px;
left: 6px;
}
I have an html input and a font awesome icon. I don't want to limit the amount of text a user enters. Rather, I'd like to make it so that the text doesn't overlap .fa-comment-o...any extra text will just be hidden (not cut-off, just hidden). The best example I can give is when you enter something in google the text doesn't overlap the microphone, nor do they cut if off (they use an image whereas I am using a font icon).
Here's my fiddle
<div id="container">
<input id="input" value="This is some really long text that will almost certainly not fit within the text box. What I'd like to do is not bleed beyond the comment icon."/>
<i class="fa fa-comment-o"></i>
</div>
#input{
width: 300px;
height: 25px;
margin-right: -30px;
}
.fa-comment-o{
font-size: 16px;
color: #333;
cursor: pointer;
right: 10px;
}
Do the following changes to your code padding-right:30px Beware when your increase your padding your width increases.
#input{
width: 270px;
height: 25px;
margin-right: -30px;
padding-right:30px;
}
UPDATED FIDDLE
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
So I have an image that is between 2 anchor tags. the css for the image is..
#howDoesItWork {
position: absolute;
height: 31px;
width: 154px;
border-style: none;
top: 3px;
left: 20px;
}
the right 20 px of the image isn't being noticed as a link in firefox. It works fine in IE. I tried changing it to padding left: 20px and margin-left: 20px. It still shows that last 20px as not being part of the link. It works fine I take the positioning away completely though.
<a id="howDoesItWork" href="">
<img src="images/howDoesItWork.jpg" alt=""/>
</a>
FIXED: I set the z-index to 2. Apparent the menu right next to it was overlapping onto the howDoesItWork imaage.
When you absolute position the image the link doesn't use the image to base its width on.
Because you've set a left: 20px it will stick over the range of the link.
So you need to extend the coverage of the link. Without knowing anything else about your document (ie. columns, what you are trying to do) my best guess is:
a #howDoesItWork { padding-right: 20px; }
If that doesn't do it... just show us more information.
UPDATE
With the new html info it should be:
#howDoesItWork { padding-right: 20px; }
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better