I have this code of popup.htlm file:
HTML
<body>
<select style="width: 100%;"
multiple id="HLSlist">
</select>
<span style="display:inline">
<button type="button" id="Deletebut">Delete</button>
<button type="button" id="OpenAllbut">Open All</button>
<t id='VFlagged'>0</t>
</span>
<hr>
<input type="checkbox" id="BlurThumbs">
<t>Blur Thumbnails</t>
</body>
CSS
body {
overflow-x: hidden;
min-width: 200px;
}
t {
font-size: 10pt;
}
I want that the text goes to the right side, like appear on the picture:
You can simply float it.
jsFiddle here - it has the results you expect.
#VFlagged {
float: right;
padding-right: 10px;
}
Some padding might be necessary - I added 10px..
Also.. I changed the t element to a span..
Related
So I am making an HTML sidebar in Google Sheets using Apps Script. I am also using the Skeleton CSS framework.
So I'd like the submit button here to be centered:
I've tried this: making an align class in CSS, and then applying it to the button. I forgot to mention that all my other elements are aligned except the buttons.
<style>
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
</style>
Here is my HTML code:
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
Thanks!
All of these 3 solutions should work, I would choose the second or third one.
If you make the div full-width and add align to it, it should work
<div class="u-full-width align">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also make the div a flex, like so (Use classes instead of inline style)
<div class="u-full-width" style="display:flex; justify-content: center">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also add margin:auto and float:none to the button (Use classes instead of inline style)
<button type="submit" class="button-primary"
style="margin:auto; float:none">Submit</button>
The code is:
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
And here it is in action:
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
/*new code from here*/
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
css:
h1{
font-size: 20pt;
width:100%;
}
h2{
font-size: 16pt;
width:100%;
}
html:add all text content within span tag:
<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>
Im stuck on creating four dropdown menu side by side with a header on a pair of them. The result im trying to make should look like this
Header Header2
[menu1] [menu2] [submit button] [menu3] [menu4] [submit button]
But it looks like this for me right now:
Header [menu1] [menu2] [sub button]
Header1 [menu1] [menu2] [sub button]
This is what i have done so far, you can see it in JSFiddle link blew:
https://jsfiddle.net/snrk425x/
Just change your info css class into flex.
You can read about it here: CSS Tricks, W3.
.info {
display: flex;
}
select {
display: inline;
cursor: pointer;
}
.box {
width: 100%;
display: inline-block;
margin: 20px 0px 20px 20px;
}
form {
display: inline-block;
}
<div class="info">
<form action="server.php" method="post" class="box">
<select name="from"></select>
<select name="to"></select>
<button type="submit" name="valuta" onsubmit="update.style.display='none'">show graph </button>
</form>
<form action="server1.php" method="post" class="box">
<select name="from"></select>
<select name="to"></select>
<button id="cryp1" type="submit" name="cryp" onsubmit="update.style.display='none'"> show graph </button>
</form>
</div>
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 alter this collection of buttons to wrap at the right edge of the screen. Currently they do not respect the right border of the screen and they just continue off the edge (well they aren't visible anyway).
How do I force these buttons to automatically wrap to a new line within the table? The screen is re-sizable so I can't just set them statically.
Thanks.
<td>
<table class="clsActionTable">
<tr>
<td style="text-align:center;">
<button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</td>
</tr>
</table>
and the CSS...
.clsActionTable
{
width: 100%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 128px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
width:100%;
background-color: #4E5A81;
color: White;
}
The reason you are not seeing it wrap in IE9 is because your original code http://jsfiddle.net/VdBGe/ automatically drops into compatibility mode. If you un-check it and put it back to standards mode you will see it wrap. It wraps for IE8+9 but not IE7.
To make it wrap in IE7 using your original code, you need to wrap the buttons in a div and set width:100%. Live Example: http://jsfiddle.net/VdBGe/1/
HTML:
<td style="text-align:center;">
<div id="btnwrap">
<button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</div>
</td>
CSS:
#btnwrap{
width: 100%;
}
<table class="clsActionTable">
<tr>
<td style="text-align:center;">
<button class="clsActionButton moveright" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton moveright" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton moveright" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton moveright" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</td>
</tr>
</table>
and the css
.moveright {
float: right;
}
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix{display:block;}
Assuming these buttons are floating & display block. I recommend the following.
you remove text-align:center from the <td>
remove both float and display: block from the buttons(If they have these properties)
To align them right, just give the text align-right
Hope this makes sense