Here's another CSS changes only question. [
Demonstrated here
So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?
<label> Enter Zipcode: </label>
<span class='bg'>
<span class='leftcap'>
<span class='rightcap'>
<input type="text" class="textfield" name="zipCode" />
</span>
</span>
</span>
edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.
edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/
I changed outer2 to display:inline-block, that fixes it.
The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)
Fix: add letter-spacing:-4px + line-height: 1px.
See http://jsfiddle.net/L8TyD/6/
EDIT: i removed the fixed width, and added hack to make it work in ie7
Related
Can't find anything on the topic, no idea if this is something old or new.
Basically, given an input[text] with adjacent div for a label which has any color besides pure black/white -- when selected (and caret is flickering inside) input somehow affects surrounding elements and visually dims them. Like some kind of filter is applied? Like a shadow or a blur or something, but it affects the entire parent' render stack no matter how far elements are from the input distance wise. TLDR: everything visually below the input is affected.
I tried checking computed props on labels and found nothing. CSSOM does not changes for them in any way.
You can try codepen, or any other sandbox.
The code is very simple:
<html style="color: #ffffff; background-color: #1e1e1e">
<head></head>
<body>
<div>
<input type="text" />
<div style="color: #f54562">Error 1</div>
<div style="color: #f54562">Error 2</div>
</div>
</body>
</html>;
I made a gif here:
Moving input into an absolute position helps isolating the effect, but obviously working with inputs like that would be very tiresome.
Checked on 2 different machines.
Reproducible in Chrome: Version 107.0.5304.107 (Official Build) (64-bit);
Edge also;
Works fine in Firefox;
So, some kind of bug or known quirk?
Just curious if there is a way to get a tighter layout with bootstrap.
Why is there so much space between the text elements?
Is it all just to accomodate pads, phones, etc?
Is there any way to choose a tighter style for the entire page to default to?
I also think the edit boxes themsselves are too large. There is too much wasted space between the text and the edge of the box.
Why aren't they a bit tighter?
These edits have been added after attempting to use code in answer from NetworkNerd
I have added the following to my stylesheet.
input[type=text]{
padding-top:0px; padding-bottom:0px;
margin-bottom:0px; /* Reduced from whatever it currently is */
margin-top:0px; /* Reduced from whatever it currently is */
height:24px;
}
Those additions make my form look like the following:
You can see that things got a bit tighter, but that is only because of the height:24px style.
The other changes do not seem to have any affect on the look.
By the way, the stylesheet which includes this change is the last one included.
Labels Are Not Aligned
Also, notice that now that I've changed that the labels are not aligned with their associated text input.
Still Too Much Margin Between Text Boxes
And there still seems to be too much margin space between the text boxes.
HTML Code Snippet For Title
Here's a snippet of the HTML which shows the HTML with the applied Bootstrap styles.
This was all just copied from samples on the bootstrap site.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="titleText" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input id="titleText" class="form-control" type="text" ng-model="book.title" />
</div>
</div>
Bootstrap doesn't recommend editing bootstrap.css itself. It is recommended per best practices to modify the bootstrap style in another, dominant CSS file.
Try doing something like this:
Custom CSS
input[type=text]{
padding:0px;
margin-bottom:2px; /* Reduced from whatever it currently is */
margin-top:2px; /* Reduced from whatever it currently is */
}
It's hard to tell from the picture if it's a margin on the top or bottom. You can remove the margin-[top|bottom] based on what the result of your testing is.
It's also possible that the input element isn't the one with a margin, it could be the label element instead (Bootstrap, at least in my experiences, does some strange things with the label element...)
Another edit: I like to give people options. Therefore, if this is in a table element, consider adding the table-condensed class to the table tag to reduce some of the whitespace between items, as shown below:
<table class="table table-condensed">
In Bootstrap 4 you can use the form-control-sm class. See https://getbootstrap.com/docs/4.1/components/forms/#sizing
This is taken directly from the Bootstrap documentation,
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Prior to Bootstrap 4 you could use input-sm. See https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
You can go into the bootstrap.css and find the padding and margin values and change them around or do that in another stylesheet
Having a slight CSS issue with my buttons in this CodePen.
The first one seems to be spacing my buttons, and I'm not sure why. However if you click on the + button to add more tables, the weird spacing is gone, and it follows my input type button margin style.
How can I fix this?
Because whitespace matters, basically, as you deal with inline elements. The <input>s in the source code are separated by whitespace; the ones injected (by JS) aren't.
There are various solutions to this, most of them listed in this question (I'd suggest checking them all instead of just the accepted one). Those, in turn, can be grouped into...
1) 'tag clash', removing whitespace in between elements. It can be done like this...
<input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />
... or like this...
<input type="button" class="some_class" /><!--
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />
2) 'style collapse' - leaving whitespace in place, but making it invisible. In absense of the simple solution, usually this involves creating some container around those inline elements, and setting its font-size and line-height to 0.
The downside of this approach is that you'll have to restore these properties for the elements inside that container.
3) 'floating' - turning all the inline elements into blocks, applying 'float' style to them. This way the whitespace will go away visually too.
I have a better solution.
just add a 'font-size:0' to the parent tag '' and then add 'font-size:13px' to the input buttons (to class '.togPTbutton').
i just tried the above on your code and its working.
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
I don't know how strong the support of RadControls over here is, but it can't be worse than Telerik(there I'm lucky to get a response in 2-3 days), so I'm going to try here first.
Basically, I'm trying to do custom theming(using just CSS classes) throughout my application, so I tried setting the CSS classes needed on the telerik RadTab controls.
Well, when inspecting it in firebug, it adds an extra like 50 px of padding to each tab, which there seems to be no control over. This is their rendered markup
<li class="rtsLI rtsFirst">
<a href="#" class="rtsLink ui-state-default"> <!--This is the only place where I can put in my own custom CSS class-->
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
Common Application
</span>
</span>
</span>
</a>
</li>
Now, I know you can't see the style classes, but according to Firebug, every class prefixed with "rts" has the line padding-left: 9px in the style sheet which would of course explain the extra padding problem. (Why do they need all this nesting anyway?!)
Anyway, I would like to remove that padding. How would you do this? Also, is there some way jquery could help to remove the padding?
If you know which setting you need to change for which classes, then the best thing to do would be to build an own style sheet with those instructions, and include it after the original stylesheet.
The important thing is to specify the classes exactly as you see them in the original style sheet, because the more specific a rule is, the more weight it has when the browser determines which settings overrule which.
This is slightly more work than doing a simple .className xyz { padding-left: 0px !important } but much, much better for maintenance. Plus, IE < 8 doesn't respect important.