Anywhere I use a bootstrap button like Button it looks fine and how I want. However I am using the same button on another page within a jQuery UI div. So if I use the button the text is black (should be white) and the colour is off.
I do know I can overwrite the style manually but I'm just wondering does anyone know why this is happening in the first place? Is there anyway I can use the same line as I always do.
Here is an example of how it is written in my code:
<div id="tabs">
<form>
<div id="tabs-1">
<div class="form-control">
Button
</div>
</div>
</form>
</div>
.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}
.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}
.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}
The code was working for me. But if its not working for you, then you can add the above code into the styling directly without removing bootstrap style link.This code does the same styling.
Thankyou
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
I'm learning CSS, but unable to get desired layout using Flexbox and CSS Grid on attached buttons.
I'm practising both Flexbox and CSS Grid at same time. Issue is if the HTML document has button tags already included, the CSS works fine. However CSS is not working on buttons appended to li tag using Javascript/dom. Same issues happening with both Flexbox and CSS grid.
// original HTML file used
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul class="list">
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
The result I'm trying to get is the delete button at the end of the li item (similar to first 2 items, notebook and jello) so that it's all justified at right side.
Any new items entered into list does not display as intended as well. Please take a look at attached link below. Any comments appreciated.
https://jsbin.com/febulokoru/edit?html,css,output
EDIT1: took a look at console again, realised the button was being appended to the textContent(inside the closing li tag). How do I move it out of li and append it after closing li tag?
nested grid can be used to fix layout issue.
instead of appendChild, use insertAdjacentElement method so button is not inside of li tag
I have a drop-down like so:
<div class="dropdown">
<select>
<option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
</select>
</div>
Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:
<div class="right-bar">
<section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
<div class="description">{{i.deptname}}</div>
<div class="inner-block">
<div ng-repeat="j in i.cgs">
<img class="vertical-image" src="frame.png">
<img class="horizontal-image" src="mobileframe.png">
</div>
</div>
</section>
</div>
whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.
You should use Angular's $anchorScroll.
Please, take a look at this similar question: How to handle anchor hash linking in AngularJS
Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
In creating this webtop app, I've created stacks of contenteditable divs exactly like this one, which is part of a homemade widget. But for some reason this one isn't working.
<div class="draft combobox" title="Draft">
<ul>
<li>
</li>
</ul>
<div class="text" contentEditable="true"> <!-- Right Here -->
<img class="arrow button" src="icons/scroll-down-white.png" />
Now just a little background around the issue. I am in the process of rewriting the html, well turning it into haml anyway (with Phamlp). It was just getting too illegible. I'm also using lessphp on the css.
These are the only changes I've made. The output remains the same, only now the contenteditable div doesn't work... It accepts focus, but there's no cursor... and no response to key events.
Also I'm yet to attach any javascript to it. So there's nothing going on there that could be hindering it.
So what's wrong with this div!
OK I worked it out... turned out that I had '-webkit-user-select:none' set in the css on an ancestor div!