I have a tab pane that is basically a line of 6 images, all floated. They are all red and the bottom border is set to 4px white by default. When a tab is selected, the 4px border turns red. Unfortunately in firefox though, there is a space between the content and the border. Right now it's a button with an image inside of it. The 1px margin between the buttons is intentional and working as expected.
The margin/padding/image-border/etc are all zero, according to the development pane, but there is still a 1px white line between the content and border ?????
You can view the webpage here:
www.bookyoursite.com/more/1
The following is the buttons with their images within:
<div id="buttonContainer">
<button id="button1" class="buttons" onclick="hideAllBut('tab',1)"><img src="/images/buttons/sites.png" /></button>
<button id="button2" class="buttons" onclick="hideAllBut('tab',2)"><img src="/images/buttons/rates.png" /></button>
<button id="button3" class="buttons" onclick="hideAllBut('tab',3)"><img src="/images/buttons/recreation.png" /></button>
<button id="button4" class="buttons" onclick="hideAllBut('tab',4)"><img src="/images/buttons/facilities.png" /></button>
<button id="button5" class="buttons" onclick="hideAllBut('tab',5)"><img src="/images/buttons/ratings.png" /></button>
<button id="button6" class="buttons" onclick="hideAllBut('tab',6)"><img src="/images/buttons/nearby.png" /></button>
</div>
CSS assosiated with the above:
#buttonContainer {
font-size:0;
text-align:center;
border-image-width:0;
}
.buttons{
font-size:inherit;
position:relative;
padding:0;
border:none;
background-color:transparent;
width:90px;
margin-right:1px;
border-bottom:4px solid white;
border-image-width:inherit;
}
.buttons img {
padding:0;
border-image-width:inherit;
}
For completeness I'll include the onclick code ... but this is probably not useful:
function hideAllBut(name,n){ //hides all other items with name, and then displays the selected tab's pane
for (i = 1;i <= 1000; i ++){
p = document.getElementById(name + i);
if (p == null)break;
p.style.display="none";
document.getElementById("button" + i).style.borderBottom="4px solid white"
}
document.getElementById(name + n).style.display="block";
document.getElementById("button" + n).style.borderBottom="4px solid red"
}
In Chrome and IE, the tabs render as desired
Try setting the images to display: block
Related
The accordion gets an overline in the header when focused, as buttons and other stuff. I want to remove it, but the styling I have tried does not work. This is what I get right now:
I have faced this issue before with a panel and I got is solved by using
.p-panel .p-panel-header .p-panel-header-icon:focus {
box-shadow: none !important;
}
So I tried:
::ng-deep .p-accordion .p-accordion-header {
background-color: black;
outline: none;
box-shadow: none;
}
(The background color is just to check if something is happening) And it gets the background color only when selected, but nothing changes about that "focus" property.
I also tried
::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link {
background-color: black;
outline: none;
box-shadow: none;
}
And it only gets the background color when it is closed and not "focused". If I omit the ::ng-deep part just nothing happens.
I attach the html code of the accordion in case it can help:
<p-accordion *ngIf="mostrarControles==true && datos && vistaMovil==true">
<p-accordionTab header="{{datos.driver}} y {{datos.codriver}}" class="fuente" [(selected)]="mostrarPanelMovil">
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-2">
<span class="p-buttonset">
<button pButton pRipple class="p-button-outlined p-button-secondary" icon="pi pi-chevron-left"
(click)="restarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
<button pButton pRipple icon="pi pi-pause" class="p-button-outlined p-button-secondary"
(click)="semanaActual()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
<button pButton pRipple icon="pi pi-chevron-right" class="p-button-outlined p-button-secondary"
(click)="sumarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
</span>
</div>
</p-accordionTab>
</p-accordion>
You should target specifically the focused state of the header. Add :focus to your selector, like this:
::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus {
box-shadow: none !important;
}
I made a button that opens to make sort of like a drop-down page. I also made a button to retract the page and put an image in it, but I want to make the button not show up, only the image. Can anyone help?
HTML:
<button onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
Here's the solution:
.transparent_button {
background-color: transparent;
border: 0px;
}
<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
But for a better-written solution, you can try this (this won't force CSS uslessly):
<img onclick="close1()"src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30">
The solution: only set transparent border and background for it.
button {
background: transparent;
border: none;
}
<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
If you don't need the button, but just the image to be clicked on you can leave the button out and use the following code:
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
Maybe, if you want a border you can box it and style that:
HTML:
<div class="imageBox">
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
</div>
CSS:
.imageBox{
border:1px solid #c1c1c1;
/* Other additional styles */
}
I'm new to HTML/CSS, so I'm still working out the tags and their uses... This is what my page looks like atm.
This is the goal- sorry for the bad paint drawing..
I want to increase the size of the buttons, "+" and "-", and make them closer to the dropdown, and to the right of the dropdown...Currently, I can only get it this near.
<button type="button" class="button6" id="add_service">+</button>
<button type="button" class="button6" id="delete_row">-</button>
This is the HTML code I have for it. I have a header in CSS to link to, and I've been playing around with it, but I can't get the alignment right...How can I get it to look similar to my paint drawing?
CSS :
.button6 {
text-align: right;
content: "\00a0 \00a0 ";
}
Here is my solution
Its not perfect, but it will give you starting point
.parent {
width: 150px;
}
select {
width: 100%;
margin-bottom:5px;
}
.btns {
text-align: right;
}
<div class="parent">
<select>
</select>
<div class="btns">
<button type="button" class="button6" id="add_service">+</button>
<button type="button" class="button6" id="delete_row">-</button>
</div>
</div>
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>
I'm trying to set up the background white for #7 as seen here:
http://jsfiddle.net/eab6ytom/1/
I dont want a line going through my text where it says 7.Input Type "submit"/"reset"
Relevant code to this portion:
<div class="subHeader">
<h3>7.Input Type "submit"/"reset"</h3>
<div class="submit">
<div class="subBorder">
<div class="subBordColor">
<p> <input type="submit" value="Submit Information" />
<input type="reset" value=" Clear " />
</p>
</form>
</div>
</div>
</div>
</div>
h3{
position:absolute;
border-style: solid;
border-color: blue;
margin-left:-300px;
margin-top:200px;
font-size:12px;
background-color:white;
}
.subBordColor{
border-style:solid;
border-color:blue;
padding:10px;
}
.subBorder{
border-style:groove; border-width:10px;
border-top-color:#A0A0A0;
border-right-color:#A0A0A0 ;
border-bottom-color:#A0A0A0 ;
border-left-color:#A0A0A0 }
}
The background color works fine. The reason that the line goes through the box is that it's on top of it. The z order of elements is determined by the element order by default; the last element is on top.
You can add z-index: 1; to the h3 rule to place it on top of the other element.