I have a button which should be places in right most corner, so I used CSS for that, in 100% zoom it works fine but when I give 75% zoom Out, it shows the button in middle, I tried giving position fixed / absolute / relative, but nothing worked.
Can someone help me please.
.btn-primary {
background: transparent;
border-color: #2980b9;
color: #2980b9;
margin-left: 653px;
position: relative;
}
<button class="btn btn-primary btn--rounded" id="AnchroTagForButton" name="submit" type="button" title="btn action">>>> Show Components<i class="btn-icon fa fa-arrow-right"></i></button>
Images while Zooming in and Out
100% ZOOM IN
67% ZOOM IN
Maybe you just need to set to fixed on it (unaffected by scrolling) since it is then out of the document flow. (might need margin-right but will leave that to you
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position
.btn-primary {
background: transparent;
border-color: #2980b9;
color: #2980b9;
position: fixed;
right: 0px;
}
<button class="btn btn-primary btn--rounded" id="AnchroTagForButton" name="submit" type="button" title="btn action">>>> Show Components<i class="btn-icon fa fa-arrow-right"></i></button>
Related
I have a custom navbar(bootstrap) on my page.
<nav class='navbar fixed-top navCustom '>
<div class='navComp'>
<input class='dateStyle' id='dateChart' type='date' value='" . $now . "'/>
<button id='refreshBtn' class='refreshStyle' type='button' name='refresh'>Refresh</button>
<form style='display:inline' method='post' action=''>
<button id='logout' class='logoutStyle' type='submit' name='logout'>Log Out</button>
</form>
</div>
</nav>
Here is css of navCustom and navComp:
#media (min-width:600px) {
.navCustom{
justify-content: center !important;
}
}
.navCustom{
margin-top: -1px;
height: 33px;
white-space: nowrap;
}
.navComp{
position: absolute;
text-align: center;
border-style: solid;
border-color: #dadada;
border-width: 1px;
border-radius: 3px;
background-color: #fafafa;
padding-left:5px;
padding-right:5px;
box-shadow:0 0px 2px rgba(0, 0, 0, 0.1);
}
My problem is when the size of browser is thin.
The navbar overflow on the right margin of browser, but scrollbar don't appears.
The scrollbar appears only when divs with text Test overflow on the right margin.
Finally I figured out.
.fixed-top from Bootstrap has position: fixed which is the reason why scroll bar is not triggered by my element.
I fixed it by added position: sticky !important; into my .navCustom
That made me to change a little bit my css and structure, but at least I had obtained what I wanted.
I want to reduce default size of button but only the font size reduces. I want to reduce font size and button size in proportion.
I tried to reduce font button then the size was not in proportion to font.
Reference link: https://mdbootstrap.com/components/buttons/
Code:
HTML:
<div class="standings">
<div class="standingstitle">
<h4>Teams Standings</h4>
<button type="button" class="btn btn-danger">See all stats</button>
</div>
</div>
CSS:
.btn-danger{
font-size: 6px;
width: 25px;
height: 30px;
}
Screenshot: (default size of button):
After trying above code gave me:
You need to adjust the padding property in the default btn selector. Try this code.
.btn {
padding: .4rem 1.5rem;
}
Try to make your selector more specific to prevent your rules from being overwritten:
btn btn-sm btn-danger {
font-size: 6px;
width: 25px;
height: 30px;
}
I use a class named "save-button" to degsin buttons in some page its work perfect in other when hover on it button disapear !!
this is the class in SCSS page (i use foundation frame work):
.save-button,.comment-button
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/comment_save.png');
}
.exit-button,
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/chose_file.gif');
}
.login-button
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/login_.gif');
}
.send-message
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/send_mass.png');
}
.save-button:hover,
.exit-button:hover,.login-button:active,.login-button:focus,.login-button:hover,.comment-button:hover,.comment-button:focus,.comment-button:active,
,.send-message:hover,.send-message:focus,.send-message:active
{
outline:transparent;
background-color:transparent;
}
.exit-button,.save-button,.login-button,.comment-button,.send-message
{
background-repeat: no-repeat;
background-size:100% 100% ;
text-align:center;
color: white;
width:100%;
margin:0;
}
.comment-button
{
margin:0 0 1rem;
}
This is the implementaion in html page:
this OK:
<button type="button" class="button save-button" id="saveButton" onclick="OKSelectUserDialog()"><fmt:message key="confirm"/></button>
this disapear on hover:
<button type="button" class="button save-button" onclick="filter();"></button>
someone can help me? please......
Try this
.button.save-button:hover {
opacity: 0;
}
<button type="button" class="button save-button" onclick="filter();"></button>
I am considering that you are trying to say that you don't want your save button completely transparent on hovering the mous For this you can set opacity value.
For making not transparent at all
Do this
.save-button{
opacity:1;
}
<button type="button" class="button save-button" onclick="filter();">
</button
For completely transparent
Set opacity: 0;
Or use any other level between 0 to 1 to make it partially transparent.
I have two buttons,one of the button text is not in the center of the button.
.mail_download_csv_btn{
width: 100px !important;
font-size: 12px !important;
}
.margin_right_10{
margin-right:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button>
<button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>
The text Download CSV is not centered to the button.Any help would be great.
Thank You.
It is centered, just your buttons width is limited, and the text overflow on right side, change:
.mail_download_csv_btn{
width: 100px !important;
font-size: 12px !important;
}
to
.mail_download_csv_btn{
width: 125px !important;
font-size: 12px !important;
}
I were setted width to a 125px, if you wish to have buttons the same width, otherwise, just delete width tag, if you wish to be auto.
Example with larger width:
.mail_download_csv_btn{
width: 125px !important;
font-size: 12px !important;
}
.margin_right_10{
margin-right:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button>
<button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>
The text is not centered because you set an explicit width to your button that simply is too small for the text.
Remove width: 100px !important from your .mail_download_csv_btn and the text gets the space needed for being centered.
If you want all buttons to have the same size, you should not set an explicit width as you can't know how much space the widest button will take in different browsers.
Instead try something like setting all buttons to the width of the widest button.
I wanted my h3 to be aligned with my buttons so I made its position absolute and a couple other things. If you want to view the problem you can go here. I don't know anything else I could use to describe the problem. Oh and the show is Once Upon A Time Season 5. Any help will be appreciated greatly.
Try these changes in your html code
<form method="get">
<h3 class="watching_what">
<button class="change" style="float:left;" type="submit" name="episode_num" value="0">Previous</button>
You Are Watching Episode 1
<button class="change" style="float:right;" type="submit" name="episode_num" value="2">Next</button>
</h3>
</form>
And in your css code remove the transform property
.watching_what
{
text-align: center;
color: 003099;
position: absolute;
/* position: element(#target); */
/* transform: translateY(-100%); */
left: 0px;
right: 0px;
padding-top: 18pt;
padding-bottom: 18pt;
}
Please add position and z-index to .change class in your css file. I checked in the browser its working.
.change{
position: relative;
z-index: 100;
}