I am new to bootstrap and I watched some tutorials (ASP.NET).
I created a button with a CssClass:
But the button looks bugged? It must look like the first button, but my button is the second:
I have no clue what I am doing wrong!
This is my container:
<div class="container">
<div class="row">
<div class="span2">...</div>
<div class="span8">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="span2">
<asp:Button ID="btnSignup" runat="server" Text="Button" CssClass="btn btn-large btn-success" />
</div>
</div>
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br/> All you get is this message and a barebones HTML document.</p>
</div>
Did you modify Bootstrap CSS in any way or are you loading any additional CSS?
What browser are you seeing this in?
It would help if you posted your code on jsfiddle.net
Anyway, this issue happens when you remove background-image from the normal (mouse out) button state of the .btn-success class. Bootstrap uses transition to shift background-position by 15px in hover state and this is what you end up with.
Found the answer!
I downloaded the customized bootstrap files with full features via this link:
http://twitter.github.io/bootstrap/customize.html
Then I am getting that bug.
But when I download bootstrap from below, and replace the css file from the customized bootstrap with the new downloaded css:
http://twitter.github.io/bootstrap/
Then I don't have any bugs!
Just to complement your own answer, since you are using bootstrap + Visual Studio, you may have to know that there's a bug on Visual Studio that edits some CSS3 properties.
You should keep an backup from bootstrap.css, because this issue may happen again when editing an .aspx, .htm that uses this stylesheet.
I just know the bug, but I don't have any solutions for it
Related
I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:
bundle add bootstrap
It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added
#import "bootstrap";
#import "bootstrap-sprockets";
to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.
I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.
This is how it looks
(https://i.stack.imgur.com/R630H.png)
<div class="container">
<div class="jumbotron text-center">
<h1>
This is my header
</h1>
<p>
Hello this should maybe someday be a jumbotron
</p>
</div>
<div class="callout callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
<button class="btn btn-success">Green button</button>
</div>
Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4
I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository
I tried using a full html5 template and adding
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?
I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did.
Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/
Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/
Happy hacking!
I am using Bootstrap CSS in a ASP.NET core app.
Any tips on improving the appearance of this drop down? better spacing, and text look better. Thanks,Peter
This is my cshtml code :
<div class="container">
<div id='dropdown' style="width:40%">
#Html.DropDownList("drop", (MultiSelectList)ViewBag.Categories, "Select"))
</div>
<div id='calendar' style="width:65%" />
</div>
https://silviomoreto.github.io/bootstrap-select/
try using Bootstrap Select to improve the apperance of dropdown Menu in Bootstrap
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have a problem in my web application in the chat part with jQuery Mobile and cordova.
I decided to fixed the footer with an textaera and a button to send message. But when I touch the textarea to write a message my keybord doesn't show up. I guess it is hide :S
Any idea to fixe that?
Here is my code:
<div data-role="content" class="bg">
<div class="chat-liste">
<div class="chat-left">
</div>
<div class="chat-content">
</div>
<div class="chat-form" data-role="footer" data-position="fixed">
<textarea class="chat-form-text"></textarea><input type="submit" class="chat-form-submit send"/>
</div>
</div>
</div>
Thanks :)
Actually the keyboard is not html but a part of the system widgets so it's impossible to hide it behind a html element.
Be sure that no other invisible elements above the textarea are recieving / stealing it's touch event. Prerequisite is that your textarea can be touched.
Would need to see your css and code too to tell if it's a html problem or there is somewhere in your jq an event.preventDefault() on this element.
When it's html-problem. Try to give the textarea a higher z-index like this:
<textarea class="chat-form-text" style="z-index:10000;"></textarea>
I am creating an aspx page which appears fine in mozilla firefox but does not look so great in Internet explorer. In Mozilla its appearing something of this format:
<form>
some stuff
<div class="left">
<div class="right">
</form>
but looking at the source code of the page loaded in IE 8, it looks sometbhing like this:
<form>
some stuff
</form>
<div class="left">
<div class="right">
What approach should I take to start fixing it? So far I've tried playing around with the css and fixing paddings and margins but nothing works :/
Thanks so much
C
I think the OP's code is just pseudocode to illustrate his point. If the left and right divs are floated, you might need to add a clearing element after them, to make the form expand around it.
<form>
<div class="left">Stuff</div>
<div class="right">Stuff</div>
<br style="clear: both;" />
</form>
There are better methods than <br style="clear:both; />, but you can try it to see if it fixes your problem.