On my jQuery - Dialog I have a form with multiple form fields. There I have a link to add "Attributes". Now I want to have this on the left side of the dialog and on the same line like the submit button. The div "somediv" must be an inline-element.
How can I achieve that?
jsFiddle - http://jsfiddle.net/Auzx6/
(Please expand the "Result" frame a lot.)
Thank you very much!
Adding a <br clear="all" /> before the div actions (<div class="actions">) should make the trick.
The clear="all" will clean all the previous floats.
Then if you want it on the left side just add this css rule "text-align: left" on that div.
Related
I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}
I have a semantic-ui-react form LocationSearchForm in the menu bar like below:
I put LocationSearchForm inside the <Menu.Item>
<Menu.Item>
<LocationSearchForm />
</Menu.Item>
But as you see, the form isn't getting vertically centered. Other menu.item like links, signin and signout are perfectly centered, only displaying this form has a bit problem. How can I get it vertically centered? Thanks!
You are getting space below input, because when you write,
<Form>
<Form.Field>
<input placeholder='Your City' />
</Form.Field>
</Form>
Your Form.Field getting margin-bottom : 1rem.
You need to remove margin. Simple way is inline style,
<Form.Field style={{marginBottom:'0'}}>
Or you can assign a class-name, and then write CSS for that class-name.
I am trying to make a toggle switch which has a label positioned on each side of the toggle and a label on top.
E.g. I'm trying to make a left/right switch.
Out put would look like this.
Side
Left [Toggle] Right
This is the toggle code:
<Toggle
floatingLabelText="Side"
label="Side"
labelPosition="right"
style={styles.toggle}
/>
There is no option to set both labels (right and left) at the same time in Toggle component.
What I have done is a workaround to this problem is by doing this kind of code:
<div>
<label>Option 1</label>
<Toggle
label="Option 2"
labelPosition="right"
style={{margin : '-20px 0px 0px 60px'}}
defaultToggled={false}
onToggle={function(event: object, isInputChecked: bool)}
/>
</div>
Please Note: You can change this 'style={{margin : '-20px 0px 0px 60px'}}' as per your desired place ment.
Material UI only supports a Left OR right side label. You'll have to use HTML and CSS to position the labels to the other two positions.
In this case I'd suggest not using the label property at all and just enclosing the Toggle in a div with some spans to show the appropriate text.
I have a short Ordered List that contains 2 items. Within the second Item, I want to position a button on the right. The CSS is giving me trouble so I am posting it here with the hope that someone more skilled can help.
Here's the markup:
<ol>
<li>Go here to perform an internal review.</li>
<li>When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.<span style="width: 25%; display: block;float: right;" ><asp:Button runat="server" runat="server" ID="StageChanges" Text="Stage Changes" OnClick="StageChanges"/></span></li>
</ol>
Ideally I want the button to be inline with list element 2. The text for list element 2 should wrap appropriately. Right now the button goes below the second list element.
I tried a couple of variations, but nothing seems to work as I'd like. One variation included specifying the width of the second list element, but this removed the number 2 from being displayed (or moved it over to be in front of the button).
Thank you in advance!
Edited to add image:
When I crop your code down a bit it works splendidly. The button is being positioned inline of the second list element:
<li>
When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.
<button>Stage Changes</button>
</li>
Keep in mind that button is one of those few form elements that gets its text from the content it wraps, not from a text-attribute.
Add CSS for list items
ol li{
display: inline-block;
}
I have a rich:panel with a style="overflow: scroll" tag inside. By default, the scroll slides left to right. I am constantly adding a new dataTable to a dataGrid with the click of a button and I want the user to always see the most recent one, and since I have it set up so that each dataTable is added as a column to the dataGrid, the most recent one will always be on the right side of the dataGrid. Is there a way I can default the scroll to go right to left? Or maybe creating the columns from right to left?
Here is the code for my panel:
<rich:panel id="PREV" rendered="#{yieldSearch.update}" style = "overflow: scroll">
<rich:dataGrid id="PT" value="#{yieldSearch.storeYieldTest}"
var="_yield" columns="#{yieldSearch.columns}">
</rich:dataGrid>
</rich:panel>
and here is my button:
<h:commandButton id="NXT" value="Add New Store" rendered="#{yieldSearch.update}" action="# {yieldSearch.newStore()}" >
It is little bit difficult to answer because you haven't provided any code sample.
However I think you can use javascript for this. I assume your panel structure is as below.
<rich:panel id="myPnl"........>
<rich:dataGrid id="myGrid".............>
.........
</rich:dataGrid>
</rich:panel>
And I assume you add dataTables in to the dataGrid by clicking a <a4j:commandButton> and calling an action. If so add an oncomplete event to the <a4j:commandButton> as below.
<a4j:commandButton value="Add new data table" reRender="myPnl" oncomplete="#{rich:element('myPnl')}.scrollLeft += #{rich:element('myGrid')}.offsetWidth;"/>