I am trying to achieve the icon shown below, using combination of 2 bootstrap icons:
I tried giving margin\top\right. None of it seem to have any effect.
This is what I have tried so far: jsfiddle
Code:
<div class="row pull-right" style="margin-right: 50px; margin-top: 10px;">
<div id="toggleIcon">
<div class="eye">
<span class="glyphicon glyphicon-eye-open adjust-eye"></span>
</div>
<span class="glyphicon glyphicon-align-justify"></span>
</div>
</div>
SCSS: (in fiddle)
Kindly let me know how can that be achieved and also why isn't margin\top\right working as expected?
#toggleIcon .eye{position: relative; bottom:-20px;}
Related
I'm working with a project in Blazor.
I'm using a component called "BlazorWheelZoom" (https://github.com/iso8859/BlazorWheelZoom)
This is my first page:
#page "/"
#page "/print"
#using Blazorise
#using LabelPrint.Shared
#using Linak.LabelPrint.Client.Shared.Components
<h3>Print</h3>
<div class="container-lg">
<div class="row">
<div class="d-flex justify-content-center">
<div style="border: thin solid green; width: 510px; height: 510px; padding: 5px;">
<WheelZoom Image="/Img/rotate0.png" width="500" height="500" />
</div>
</div>
.... and so on
For this HTML as you can see above, I get the following output:
The image refuses to move to the left, just as expected. If i zoom in a little bit I can move it a few pixels corresponding to the difference (the part of the image that you cannot see) and then it stops.
See the demo of the creator: https://blazorwheelzoom.azurewebsites.net
But when I add the exact same code to a popup Modal, I can keep moving it to the left.
I have the exact same HTML and CSS, so it must be something with the parent I guess. But I have tried to disable/enable stuff, but without luck. I just want the image to be prevented from moving "out of bounds" if you know what I mean.
This is the HTML in my Modal:
<Modal #ref="LabelPreview">
<ModalContent Centered="true" Size="ModalSize.Large">
<ModalHeader>
<ModalTitle>Show</ModalTitle>
<CloseButton />
</ModalHeader>
<nav class="navbar navbar-light bg-light">
<Button #onclick="() => RotateImage(true)">
<i class="fas fa-redo"></i>
</Button>
<Button #onclick="() => RotateImage(false)">
<i class="fas fa-undo"></i>
</Button>
</nav>
<ModalBody>
<div class="d-flex justify-content-center">
<div class="#($"{rotationClass} frame")">
<WheelZoom Image="#(rotate0)" width="500" height="500" />
</div>
</div>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary" Clicked="#DownloadImage">Download</Button>
<Button Color="Color.Primary" Clicked="#HidePreviewModal">OK</Button>
</ModalFooter>
</ModalContent>
The Modal component I'm using is from Blazorise
This gotta be some CSS thing, but I'm about to give up. So hopefully some of you guys can help me.
I have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I am trying to center the button below - I have tried from other examples altering CSS code or using text-align: center but neither options have worked. I know the code itself can be fixed but I am quite a newbie so any tips would help.
Thanks
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
Try This:
div {
text-align: center;
}
<div>
<button><a class="btn-group" style="color: #000" href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
</div>
Take one outer div and set text-align : center to this div.
use this Code :
<div style = "text-align: center;">
<button>
<a class="btn-group" href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
The simplest solution is:
HTML
<div>
<button>
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
CSS
div {
text-align:center;
}
I am trying to put links in bootstrap alert box but when I do the box is too big in height? When I change the css height the text and the link is well below it? What am I doing wrong? Thankyou
The code is
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
<span id="mystuff1"><button id = "button1" type = "button" class = "btn btn-link">click here</button></span>
</div>
You did not leave much detail of what you are trying to achieve, but based on what you are doing as you add elements inside the outer container it grows too tall?
This is happening because the top container has the .alert class. And this class has padding: 15px;
If you remove that padding you should see what I think you want.
Try:
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
Cannot test it right now, but I think you have to change the mystuff1 from span to div or p element.
This part of your code contains an error:
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
That should be
<div id = "mystuff" style="margin-top: 15px" class="alert alert-info">
Try this code snippet.
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
You also find the detail of alert in below link:
bootstrap alert details
So I have this code:
<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
<span id="sitetour-pointer"></span>
<div class="content-wrapper">
<span id="sitetour-header" class="sitetour-header">Test Text</span>
<div id="sitetour-content">
Why this is not being read
<div id="demo-bb" class="demo-bg">
<div></div>
</div>
</div>
</div>
<div id="sitetour-footer">
<button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
<button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
<button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
</div>
</div>
And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?
I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.