I've been trying to style my search box the way I want it and it's very nearly there. The only problem is that my widths are wonky somewhere. They look OK on initial glance but the area of the input box leaks into the submit button. This is most visible on mobile where my border-right: none; is ignored and a rounded border overlaps the button. It's also evident on Chrome where a suggestions dropdown overhangs the button.
iPhone view
Area of input box leaks into button
The search box is generated by Search API Pages module on Drupal 9. You can see it in action here https://verygomez.com/search where it appears in both the sidebar block and on the page. I need them both to look good but they share most of the CSS. I'm at a bit of a loss. Incidentally, I'd ideally like the search bar in the sidebar to be a bit wider but I can't figure out how to do that.
.search-api-page-block-form-search {
position:relative;
width:100%;
display:inline-block;
}
.search-api-page-block-form-search .form-item {
width: 70%;
float: left;
}
.search-api-page-block-form-search .form-actions {
width: 30%;
float: right;
}
.search-api-page-block-form-search .form-type-search input {
border-right: none !important;
text-indent: 25px;
background-color: transparent;
position: absolute;
display: inline-block;
width: 66%;
}
.search-api-page-block-form-search .form-type-search:before {
content: "\f002";
font-family: FontAwesome;
position: relative;
top: 8px;
left: 25px;
background-color: transparent;
}
.search-api-page-block-form-search .form-item,
.search-api-page-block-form-search .form-actions {
margin: 5px auto!important;
display: inline-block;
font-family: Consolas, "courier new";
}
.search-api-page-block-form-search .form-actions input {
font-family: FontAwesome;
margin: 0 !important;
}
.path-search form.search-form>.form-wrapper>.form-submit{
position:relative;
right:0;
bottom:0;
margin:0 !important;
width:100%;
}
Edit
I have a progress update. Changing the position from absolute to relative here:
.search-api-page-block-form-search .form-type-search input {
border-right: none !important;
text-indent: 25px;
background-color: transparent;
position: relative;
display: inline-block;
bottom: 25px;
}
has corrected the input box to the correct width enabling me to scrap the 66%. This could solve my problem but now the boxes are no longer aligned horizontally. I tried to fudge it with a bottom but of course it isn't close enough. I just have a different problem to solve. (I have however managed to make the sidebar search box wider so it's not all bad).
Edit 2
Final progress update of the evening. I have now exchanged that issue for yet another one. Changing the fontawesome background image to position: absolute; (as it also is in the code of the default search box that I'm copying from), the box and button are now perfectly aligned and the widths look good.
However, with an absolute setting the search icon is now in a different position in the sidebar than in the page and it changes according to screen size so it's also out of alignment on mobile. Is there a way to make it just sit neatly in the search box? I feel like I'm missing something.
.search-api-page-block-form-search .form-type-search:before {
content: "\f002";
font-family: FontAwesome;
position: absolute;
top: 42px;
left: 34px;
background-color: transparent;
}
I've done it!!! After I'd made the changes described in my edits above, I was just missing this little beast!
.search-api-page-block-form-search .form-type-search {
position: relative;
}
Related
Context:
I'm trying to use CSS to display playing cards for a game I'm designing on my free time
What I'm trying to do, specifically:
Nothing revolutionary, there's a place on my cards in which I need to write some text, and I want to center the text so that it looks good
What I did:
The relevant part of the HTML is simply this:
<div class = "card_header">
<div class = "card_cost">1</div>
</div>
And the relevant CSS:
.card_header {
position: relative;
top: 110px;
box-sizing: border-box;
width: 100%;
height: 75px;
}
.card_cost {
position: absolute;
top: 50%;
right: 165px;
transform: translateY(-50%);
font-size: 60px;
font-weight: bold;
}
What's the problem:
I expected the card_cost text to be vertically centered between the top and bottom borders of the card_header, but under the browser I was using (Firefox), the text was a bit too high. I tried to fix this by using top: calc(50% + 4px);, which looks like this (a bit better):
Since it felt a bit too tweaky for my taste, I went and checked how it looked like under another browser (Safari) to see whether it looked the same, and it looks like this:
which is the opposite problem: the text is too low.
I've tried adding border: 1px dotted gray; to get a better idea of what's happening, and here's what I see (safari on the left, firefox on the right):
The text seems to be vertically centered within card_cost in Safari (which means it would probably get centered properly if I simply used top: 50%; as I originally did), but in Firefox the box seems to be bigger and text way-high within the box.
What exactly is going on here? Why is this behaving differently depending on the browser? Is there a way to make this render the same? Or, more broadly, is there any browser-independent way for me to make the text vertically centered here?
Edit:
Since someone mentioned line-height in the comments, here's what it looks like when I add line-height: 1; for card_cost (again, Safari on the left and Firefox on the right):
With this, the text doesn't seem as centered as before under Safari, and it's even more clear that the text is way-high under Firefox
I usually take approach with invincible :before on parent with 100% of height and vertical-align: middle;. That way this :before justifies other inline-block content:
// I would apply this style everywhere
.card_header,
.card_header * {
font-family: arial;
box-sizing: border-box;
}
.card_header {
position: relative;
top: 110px;
width: 100%;
height: 75px;
text-align: center;
background-color: rgba(100, 0, 0, .1);
}
.card_header:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
border-left: 1px solid blue;
}
.card_cost {
display: inline-block;
font-size: 60px;
height: 60px;
font-weight: bold;
vertical-align: middle;
background-color: rgba(0, 0, 100, .1);
}
<div class="card_header">
<div class="card_cost">1</div>
</div>
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.
Here is a link to my example:
http://jsbin.com/yosevagaqa/1/edit?html,css,output
If you resize the window so that the text is forces into a new line, you can see the problem.
How can I avoid this?
As you can see from the other answers, there are multiple solutions!
If the size of the square in :before is always the same, one other solution would be to add
.link {margin-left:25px; text-indent:-25px;}
to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".
http://jsfiddle.net/MrLister/3xbfyqkh/
Or what I would prefer, with sizes in ems, so that the red square depends on the font size.
.link:before {
/* .. */
width: 1em; height: 1em;
margin-right: .5em;
}
.link {margin-left:1.5em; text-indent:-1.5em;}
Making sure, of course, that the indentation is the same as the size + the margin of the square.
http://jsfiddle.net/MrLister/3xbfyqkh/1/
Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...
.link {
display:list-item; list-style:square;
color:red;
font-size:2em; line-height:.5em;
margin:.5em 0 .5em 1em}
.link a {
font-size:.417em; vertical-align:.3em}
http://jsfiddle.net/MrLister/3xbfyqkh/5/
You can add following CSS:
.link{
float: right;
width: calc(100% - 25px);
}
.link{
position: relative;
padding-left: 25px;
}
.link:before {
content: "";
background: red;
background-size: contain;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: absolute; top: 0; left: 0;
}
<h5 class="link">A long link that might wrap and then it gets all weird and stuff</h5>
I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?
.icon-wrap a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.icon-wrap a {
display: inline-block;
width: 110px;
height: 110px;
text-align: center;
overflow: hidden;
margin: 0px auto;
border: 6px solid black;
border-radius: 100%;
text-decoration: none;
}
...
Here's my code working in a fiddle
Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.
If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.
So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.
Something, like this:
.icon-wrap:first-child .icon-holder {
padding-top: 5px;
}
Here's an updated jsfiddle to that.
Again, just learning CSS and trying to make a fictive homepage.
Here's a problem I came by:
I want to center the links and their background colors inside a DIV- element. However, I also want to keep the DIV centered (15% from each side) and changing the text inside the links will still center them, so the positioning can't be a specific value (need to use per centages, I think).
EDIT: Long explanation shortly: I want to get all four blocks in the middle of the page regardless of changing the size of the browser screen or the texts inside the blocks. Thanks :)
EDIT2: Changed the title to be found more easily from the Search- query.
Anything can be done to the code or do I have to change it somehow? Thanks.
Here's the HTML:
.infos {
padding-left: 15%;
padding-right: 15%;
position: relative;
top: 40px;
}
.infos a {
background-color: black;
color: white;
margin: 0px;
display: inline;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
.infos #centered {
position: relative;
display: block;
padding: 0px;
}
<DIV CLASS="infos">
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
</DIV>
Thank you for your help!
#centered {
display:table;
background:red;
margin:auto;
}
#centered a {
color: white;
margin: 0;
float:left;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
I have a css problem with my drupal site (www.terrafirmasouth.co.uk) to do with the slideshow caption box and the pager block underneath.
When you access my site for the first time, the transparent caption box (bottom left) on the slideshow starts lower by the height of the pager block below then adjusts itself to the correct position. Pressing Ctrl-F5 also recreates the problem.
If I disable the pager block the problem goes away.
By adding position:absolute to the pager block the jumping stops, but the text below my pager block seems to interfere (overlap?) with my pager block, and I cant click on the numbers anymore to change slide .
I want to be able to show the pagers (1-6) under the slide, so that they can be clicked (I have already tested this with no position:absolute and it works fine, but I have the jumping problem of course).
I have attached my latest css below, but this has not gone live onto my site yet, just running it on my pc using xammp.
/* my caption box */
.trcaption {
position: absolute;
left: 20px;
bottom: 10px;
background: #353535;
opacity: 0.85;
filter:alpha(opacity=85);
color: #FFFFFF;
padding: 10px 10px 10px 10px;
}
/* title inside caption box */
#trtitle {
font-weight: normal;
font-size: 18px;
padding-bottom: 5px;
color: #FFFFFF;
font-family: 'LatoLight', Arial, sans-serif;
}
/* read more link inside caption box */
#trlink a {
color: #008C07;
float: left;
font-size : 12px;
}
/* pager block under my slideshow */
.views-slideshow-controls-bottom {
display: block;
position: absolute;
text-align:center;
width: 100%;
}
/* pager item i.e. number number */
.views-slideshow-pager-field-item {
display: inline-block;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* show active pager with grey background */
.views-slideshow-pager-field-item.active {
background: #E8E8E8;
}
If you are adding something absolute, make sure nothing else with property absolute is clashing with same, you can use z-index to arrange them in layer.
that will stop the clashing and things should work fine then. :)
For more help please add some working code, apart from CSS or create fiddel on jsfiddle