I have the following antd Tabs. How to get rid of the ... button on the right? (Note that it disappears when the screen width is decreased.)
The structure is like this:
<Tabs type="card">
<TabPane tab="A">
.....
</TabPane>
<TabPane tab="B">
.....
</TabPane>
</Tabs>
This is the style:
.ant-tabs-tab {
flex-grow: 1;
margin-right: 0px;
width: 100%;
height: 50px;
text-align: center;
font-weight: bold;
font-size: 15px;
justify-content: center;
color: #94a3ac;
}
.ant-tabs-nav-list {
width: 100%;
border-bottom: 6px solid #093150;
}
.ant-tabs-top > .ant-tabs-nav {
margin-bottom: 0;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
border: none;
background-color: rgba(255, 255, 255, 0.68);
}
.ant-tabs-tab-active {
background-color: #093150 !important;
.ant-tabs-tab-btn {
color: white !important;
}
just add this code in your css :
ant-tabs-nav-more { display: none; }
You can inspect element like this
then add code in your css:
.ant-tabs-nav-operations {
display: none !important;
}
Related
I'm trying to finish off our rehoming page, where a visitor clicks on an animal to open an iframe with more info output from our database. But I can't get the iframe scrollable. I've searched online extensively but can't get any of the suggestions to work.
What am I doing wrong? (I'm way out of my league with code but just doing the best I can with what I find online, so I may have made some basic errors.) Any help at all is greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<title>iFrame</title>
<script>
asm3_adoptable_filters = "size agegroup sex breed species";
asm3_adoptable_extra = function(a) {
return '<span class="waitingtime">Time waiting for a home: ' + a.TIMEONSHELTER + '</span>';
}
asm3_adoptable_iframe = true;
asm3_adoptable_iframe_fixed = true;
asm3_adoptable_translations = {
"(any sex)": "Any sex",
"(any size)": "Any size",
"(any breed)": "Any breed",
"(any age)": "Any age",
"(any species)": "Any species"
}
asm3_adoptable_sort = "-#DAYSONSHELTER";
</script>
<style>
.waitingtime {
color: black;
font-family: filson soft regular,sans-serif;
</style>
<div id="asm3-adoptables"></div>
<script src="https://service.sheltermanager.com/asmservice?method=animal_view_adoptable_js&account=sm1510"
></script>
Page CSS:
#asm3-adoptable-iframe-overlay{
background-color: rgba(0 0 0 / 57%) !important;
}
#asm3-adoptable-iframe{
overflow-y: scroll !important;
width: 479px !important;
max-width: 100%;
margin: 0 auto;
display: block;
height: 90vh !important;
background-color:white;
margin-top:3em;
}
#asm3-adoptable-iframe-close{
background-color: #c92327;
color: white;
padding: 7px 23px;
/* margin-top: 39px !important; */
position: absolute;
border-radius: 5px;
text-align: center;
right: 0;
left: 0;
margin-top: 34px;
width: 200px;
margin: 0 auto;
top:44px;
}
Element CSS:
.asm3-adoptable-item {
display: inline-block;
text-align: center;
background-color: white;
margin-bottom: 12px;
padding-top: 25px;
width: 31.8%;
margin: 10px;
}
.asm3-adoptable-item:hover {
background-color: black;
}
.asm3-adoptable-item:hover .asm3-adoptable-tagline {
color: white;
}
.asm3-adoptable-name {
font-family: "proxima soft extrabold", sans-serif;
font-size: 44px;
color: #c92327;
margin-top: -16px;
display: block;
}
.asm3-adoptable-tagline {
text-transform: lowercase;
font-family: "proxima soft extrabold",sans-serif;
font-size: 18px;
color: black;
margin-top: -10px;
display: block;
}
.asm3-adoptable-item:hover .asm3-adoptable-name {
color: #c92327;
}
.asm3-adoptable-item:hover .waitingtime {
color: white;
}
.asm3-adoptable-thumbnail {
margin-top: 15px;
width: 425px;
max-width: 100%;
height: 425px;
}
.asm3-adoptable-reserved {
position: relative;
color: white;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: "proxima soft extrabold", sans-serif;
font-size: 18pt;
}
.asm3-adoptable-reserved span:before {
content: "RESERVED";
}
.asm3-adoptable-reserved span {
position: absolute;
display: inline-block;
right: -60px;
text-align: center;
top: 50px;
background: #c92327;
width: 275px;
transform: rotate(45deg);
}
#asm3-adoptable-filters {
overflow:hidden;
}
#asm3-adoptable-filters select {
width: 17%;
float: left;
margin: 20px;
}
#asm3-adoptable-filters {
font-family: "proxima soft extrabold", sans-serif;
font-size: 22px;
background-color: #dab348;
}
.asm3-adoptable-list {
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 992px) {
.asm3-adoptable-item {
width:50%;
}
}
#media only screen and (max-width: 768px) {
.asm3-adoptable-item {
width:100%;
}
}
You are missing a closing bracket "}" in your <style> tags. After playing around with your website a little I believe you are talking about some sort of full screen modal. But then it seems you are using a iframe in the modal. You might consider not using an iframe because there is really no need and it may solve your problems. Another thing I noticed is that you don't have any links between your html and your css which you might want to look into.
I'm trying to target the weather-location-container and location to change the text design / colour in CSS.
All my other CSS seems to be working fine. I'm not sure why it isn't working?
Thanks
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
text-align: center;
background-image: url("./assets/376.png");
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
min-height: 100vh;
padding: 50px;
margin: 75px;
}
.search {
width: 100%;
}
.search .postcode-search-bar {
display: block;
width: 100%;
padding: 15px;
border: none;
background-color: rgba(255, 255, 255, 0.671);
border-radius: 16px 16px 16px 16px;
box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
font-size: 1rem;
text-align: center;
transition: 0.4s ease;
}
.search .postcode-search-bar:focus {
background-color: rgba(255, 255, 255, 0.89);
}
h1::before {
content: "\01F31E";
padding: 10px;
}
h1::after {
content: "\01F30D";
padding: 10px;
}
h1 {
color: rgb(1, 55, 102);
padding: 30px;
}
/* Why isn't the below working? */
.weather-location-container .location {
color: red;
font-size: 3rem;
font-weight: 500;
text-align: center;
}
React
import "./App.css";
function App() {
let date = new Date().toDateString();
date = date.slice(3, 15);
return (
<div className="app">
<main>
<div className="search">
<h1>Local Weather</h1>
<input
type="text"
className="postcode-search-bar"
placeholder="Enter your postcode..."
/>
</div>
<div className="weather-location-container">
<div className="location">London</div>
<div className="date">{date}</div>
</div>
<div className="weather-container">
<div className="temp">8°c</div>
<div className="weather">Cloudy</div>
</div>
</main>
</div>
);
}
export default App;
try to be more specific
main .weather-location-container .location {
color: red;
font-size: 3rem;
font-weight: 500;
text-align: center;
}
The code works. After using the dev tools to inspect the div it showed the London text being in a container that was named something different.
It turns out I didn't save the app.js file - Still learning :)
It all works now.
Thanks to the comments for the tips on how to debug this
I'm trying to make an input field with a button and custom sprite image inside of it.
The input should change the border color and show the button with an
icon while hovering. Additionally while hovering both input and
button, the icon should be changed.
Right now the icon changes with input:focus while dismissing the border of the input.
If somebody can guide me in the right direction, it would be greatly appreciated.
Here's what I came up so far:
HTML
<form class="b-editor-item col-3">
<input type="text" placeholder="D" class="b-editor-d-input" />
<button type="button" class="b-editor-button-delete">
<div class="b-editor-icon-trash"></div>
</button>
</form>
SCSS
input[type="text"] {
border: 1px solid transparent;
}
.b-editor {
&-item {
display: flex;
align-items: center;
}
&-button-delete {
border: none;
height: 24px;
width: 24px;
overflow: hidden;
background-color: transparent;
}
&-d-input {
color: black;
background-color: #eaeaea;
border-radius: 6px;
width: 90%;
margin-right: -3.25rem;
height: 2rem;
}
&-icon-trash {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1044597/trash.png);
background-repeat: no-repeat;
background-position: -28px 0;
background-size: 300%;
height: 20px;
width: 20px;
padding: 5px 2px;
}
&-d-input:hover + &-button-delete:hover > &-icon-trash,
&-d-input:focus + &-button-delete:hover > &-icon-trash {
background-position: -52px 0;
}
&-d-input + &-button-delete {
display: none;
}
&-d-input:hover + &-button-delete,
&-d-input:focus + &-button-delete,
&-d-input:hover + &-button-delete:hover {
display: block;
}
&-d-input:hover,
&-d-input:hover + &-button-delete:hover {
border: 1px solid #00c8aa !important;
}
}
Try to add these 2 rules:
button.b-editor-button-delete:hover {
display: block;
}
button.b-editor-button-delete:hover .b-editor-icon-trash {
background-position: -52px 0;
}
I started doing a website and I have a problem.
I started making my navigation bar, here's the code:
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">
<button>Services</button>
<button>About us</button>
<button>Contact us</button>
</div>
<div class="third"><button>Get Started</button></div>
</div>
and the problem is that this <a> tag is taking space outside my button area. Here's a full code on Codepen:
https://codepen.io/MareGraphics/pen/GwqpOy
What I want is to contain A tag to fit 100% inside my button, not outside od it.
Thank You
The reason you cannot adjust the height and width of your <a> is because anchor elements are inline-elements.
An inline element does not start on a new line and only takes up as much width as necessary.
If you want to adjust the height and width you would need to specify another display property, e.g.
a { display: inline-block; }
For what it's worth, it's better to omit the button inside the anchor tag, just style the anchor tag as your button to make it act like a button.
e.g. if you are using bootstrap, you can do
Get Started
Use this code:
<a style="padding:50px;background-color:gray;width100%;line-height:70px;" class="btn btn-info">Buttons</a>
Remove your buttons from navgrid div and change the CSS like this
body {
margin: 0;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
position: fixed;
width: 100%;
top: 0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.span-col-4 {
grid-column: span 4 / auto;
}
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
background-color: white;
border-right: 1px solid rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: .5s;
}
.navGrid .first:hover {
cursor: pointer;
font-size: 1.31em;
}
.navGrid {
height: 40px
}
.navGrid .second {
display: flex;
padding-left: 50px;
border-style: none;
background-color: white;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
transition: .5s;
}
.navGrid .second a {
padding: 10px;
}
.navGrid .second a:hover {
background-color: rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.navGrid .second:hover {
cursor: pointer;
}
.navGrid .third {
display: flex;
padding-left: 50px;
border-style: none;
background-color: rgb(0, 26, 255);
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
transition: .5s;
color: white;
}
.navGrid .third a {
padding: 10px;
}
.navGrid .third:hover {
background-color: rgb(3, 25, 219);
cursor: pointer;
}
.navGrid .third {
border-left: 1px solid black;
}
.content {
background-color: green;
height: 2000px;
}
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">
Services
About us
Contact us
</div>
<div class="third">Get Started</div>
</div>
I think this may help you.
I have this CSS code below of some data displayed in a form of a pill what i'm trying to accomplish is trying to add a Unicode plus sign inside of my pill something like this image below.
But whenever i try to increase the font-size of the Unicode it just messes up the whole text and shape of the pills is there any way to make it look like the image on-top without messing too much of the original css? Any help would be appreciated thanks.
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
font-size: 28px;
width: 15px;
vertical-align: baseline;
margin-left: -7px;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
When you change the actual size of the pseudo-elememt font it will change the shape of the pill accordingly since the pill's size is determined by the size of the contents.
Thus I would suggest that you change the apparent size of the glyph by using a transform instead.
Since this is entirely visual it does not affect the size of the pill.
.redpill:before {
content: "\002B";
/* font-size: 28px;*/ */ remove this */
width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display:inline-block; /* required */
transform:scale(2); /* this*/
}
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
/* font-size: 28px;*/
*/ remove this */ width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display: inline-block;
transform: scale(2)
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Make sure :before inherits class font-size:
.redpill:before {
content: "\002B";
padding-right: 2px;
}
.pilldiv {
padding: 5px 22px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}