This is more complicated than it should be, but I'm having trouble displaying an input width of literally 100% of within its div.
Example here:
http://jsfiddle.net/aml90/mfdtk/
I'm using Twitter Bootstrap. I want the inputs to be 100% of the width of the span6 classes, like the blue highlights:
Despite the lack of CSS, I have tried many things -- just didn't put the non-working CSS on there.
You will need to resize the windows, like this:
well it have to be something like this LINK
.input-prepend{
width:100%;
}
.input-prepend input{
width:95%;
}
.span6 .input-prepend {
padding-left:28px;
display:block;
}
.span6 .input-prepend .add-on {
float:left;
margin-left:-28px;
}
.span6 .input-prepend input {
width:100% !important;
}
this will put the add-on to the left side, and let the input take up remaining space
JSFiddle
Patching Bootstrap in such a way is a bit tricky, since there can be different "side effects". Maybe something along those lines will do the trick for you:
.span6 { width: 100% !important; margin-left: 0 !important }
.span6 input { width: 92%; }
.input-prepend { display: block; }
Play around with overriding these CSS directives and test you layout with it. Good luck!
http://jsfiddle.net/Yuv3H/
Related
I have having a few problems, with what should be a simple task.
I have spent a good while trying to fix them, but no luck.
Centre the Input boxes within the div - tried this solution, (didn't work): http://jsfiddle.net/pjAHG/27/
input {
display: block;
margin: auto;
max-width: 80%;
}
Make the background image fill the full screen, only to the bottom of my timer div... if I use a solid colour, it fills the screen though :/ I have tried all the ways I can find online, but no luck.
Media query does not seem to change the size of the text/submit button.
If anyone could share some info, or help for these problems, I would be grateful.
Here is my code:
https://codepen.io/anon/pen/dVNZZO
Thanks :)
Try this
.input-group{
max-width:80%;
margin:0 auto;
}
and
#media (max-width:768px) {
.btn-lg{
display:block;
max-width:100%;
white-space:normal;
}
.lead-subtitle {
color: #dbdbdb;
text-decoration: underline;
font-size: 1em;
display:block;
}
}
here is the updated pen.
centered the form element instead of the input fields as they are
set to display: table by bootstrap anyway
this question doesn't make quite sense to me. I have added a sample image and it fills the whole bg, have a look
Bootstrap sets white-space: nowrap for the .btn class; I overwrote it for you
https://codepen.io/anon/pen/xXgPjZ
Ok so I am trying to make a layout to be used with Contact Form 7. This is what I have come up with, I just feel like I could probably clean it up. Also I cant seem to remove my Submit class without breaking everything.
I want to get rid of:
.Submit {
float:right;
}
I also would like to get the columns to line up properly. I have them lined up if the screen is the right size but I would like to make this responsive if possible.
JSFiddle
Any advice would be much appreciated.
Thanks,
jFlatz
Your problem is in
.table width: 70%;
}
you left out a {, i.e.
.table {
width: 70%;
}
DEMO
You can get rid of that .Submit rule safely if you open/close the .table rule above it appropriately:
THIS...
}
.table width: 70%;
}
.Submit {
float:right;
}
Should Be...
}
.table {
width: 70%;
}
.Submit {
float:right;
}
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.
I'm styling the mail I send to my clients and I want the image to float but the text shouldn't be wrapping underneath it. I've tried
#left-image {
float:left;
}
#right-text {
display:table-cell;
}
and
#left-image {
left: 0;
position: absolute;
}
#right-text {
padding: 0 0 0 100px;
position: relative;
}
the first code still wraps the text around the image and the second set of codes puts the image on top of the texts. I've been using the second code for my confirmation page before sending and it works as how I want it to but how come my mail comes out differently?
Today I used the align (html) attribute I just wrote
<table align="left"></table>
this solved my float problems.
Why are you mixing methods? Stick to one, either float or use the display table-cell on both elements .
#left-image {
float:left;
}
#right-text {
float: left;
}
#left-image {
display: table-cell;
}
#right-text {
display: table-cell;
}
I presume that you are creating the email with ordinary div tags which is not recommended to achieve cross-platform compatibility. Use HTML email structure with no floats as well as margins and then you can see a browser as well as platform independednt mail. Instead of float:left, you can go for text-align:left if you are using html tables.
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)